Page 100 - AngularJS权威教程

80 第 10 章 指令详解

<div>
</div>
</div>
</div>
在线示例：http://jsbin.com/ITEBAF/1/edit。
现在，我们已经理解了指令的外部作用域和继承作用域是如何工作的，下面介绍最后一个和
作用域相关的难题：隔离作用域。

10.2.2 隔离作用域

隔离作用域可能是scope属性三个选项中最难理解的一个，但也是最强大的。隔离作用域的
概念是以面向对象编程为基础的。AngularJS指令的作用域中可以看到如Small Talk语言和SOLID
原则的影子。
具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件可以在未知上下文中使
用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域。

创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}。如果这样做了，指令的
模板就无法访问外部作用域了：

<div ng-controller='MainController'>
Outside myDirective: {{ myProperty }}
<div my-directive ng-init="myProperty = 'wow, this is cool'">
Inside myDirective: {{ myProperty }}
</div>
</div>

angular.module('myApp', [])
.controller('MainController', function($scope) {
})
.directive('myDirective', function() {
return {
restrict: 'A',
scope: {},
priority: 100,
template: '<div>Inside myDirective {{ myProperty }}</div>'
};
});
注意，这里为myDirective设置了一个高优先级。由于ngInit指令会以非零的优先
级运行，这个例子将会优先运行ngInit指令，然后才是我们定义的指定，并且这个
myProperty在$scope对象中是有效的。

在线示例：http://jsbin.com/eguDEpa/1/edit。
示例代码的效果与将scope设置为true几乎是相同的。下面看一下使用继承作用域的指令的
例子，对比一下二者：

<div ng-init="myProperty='wow,thisiscool'">
Surrounding scope: {{ myProperty }}
<div my-inherit-scope-directive></div>
<div my-directive></div>
</div>