<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="aModule">
<h1>A Simple Example (Broken)</h1>
<input
type ="text"
placeholder="something"
ng-model ="something"
class ="form-control"
/>
<div a-directive>
something: {{ something }}<em ng-if="! something">[nothing]</em>
</div>
</body>
</html>
angular.module( 'aModule', [ 'ng' ] )
.directive( 'aDirective', function() {
return {
transclude : true,
templateUrl: 'a-directive.html',
scope : {} // <- this is all that's changed
};
} )
.directive( 'anotherDirective', function() {
return {
transclude : true,
templateUrl: 'another-directive.html',
scope : true
};
});
/* Styles go here */
<div class="well">
In a directive (<span ng-transclude></span>)
<div another-directive>
<span ng-transclude></span>
</div>
</div>
<div class="well">
In another directive (<span ng-transclude></span>)
</div>