Reputation: 1025
I am new to Angular, and I am currently trying to understand angular directives. I am using angular 1.2.14 on my machine. I created two types of directives, one was created with scope: {}
(isolated scope) and the another one was created with scope: true
(inherit scope).
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Directive 10</title>
</head>
<body>
<div ng-init="myvar = 'MyVar!' "></div>
Level A : {{ myvar }}
<div my-true-dir>
Level B : {{ myvar }}
</div>
<div my-obj-dir>
Level C: {{ myvar }}
</div>
<script src="js/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.directive('myTrueDir', function() {
return {
scope: true
};
});
app.directive('myObjDir', function() {
return {
scope: {}
};
});
</script>
</body>
</html>
According to the description in ng-book, the isolate scope will not have access to the outer scope, vice versa. That mean in level 3, it is not supposed to have access to myvar
, which is declared in the outer scope. But when I run the given code, I got this.
Level A : MyVar!
Level B : MyVar!
Level C: MyVar!
I thought it might be the ng-book's mistake, but when I run this code in angular.js 1.2.0rc3, the result was just as described in the ng-book, which is:
Level A : MyVar!
Level B : MyVar!
Level C:
Can anybody give a clue here?
The code and result with angular 1.2.14 can be found here, and also the one with angular 1.2.0rc3 can be found here.
Upvotes: 1
Views: 71
Reputation: 16263
It seems you have been bitten by this regression which was introduced in 1.2.0 (timely-delivery). Its due fix version is 1.3.0-beta.1.
See the changelog entry.
This change assumed (almost) nobody will be writing directives without defining templates, so to work around it, just add a template definition to your directives.
Upvotes: 1