John Wu
John Wu

Reputation: 1025

Isolate scope behaves differently in angular 1.2.0rc3 and 1.2.14

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

Answers (1)

Eliran Malka
Eliran Malka

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

Related Questions