Page 71 - AngularJS权威教程

8.2 向指令中传递数据 51

如果不将URL和链接文本混在指令内部，可以为其他使用我们指令的人提供更好的体验。我 1
们的目标是关注指令的公共接口，就像其他任何编程语言一样。实际上，应该将上面的模板转换
成可以接受两个变量的形式：一个变量是URL，另一个是链接文本：
2
template: '<a href="{{ myUrl }}">{{ myLinkText }}</a>'

在主HTML文档中，可以给指令添加myUrl和myLinkText两个属性，这两个参数会成为指令 3
内部作用域的属性：

<div my-directive 4
my-url="http://google.com"
my-link-text="Click me to go to Google">
</div>
5
重新加载页面，注意声明指令的部分已经被模板代替，但是链接的href属性是空的，并且尖
括号内也没有文本，如图8-6所示。
6

7

8

9

10

11
图8-6 更新模板

有好几种途径可以设置指令内部作用域中属性的值。最简单的方法就是使用由所属控制器提 12
供的已经存在的作用域。

尽管简单，共享状态会导致很多其他问题。如果控制器被移除，或者在控制器的作用域中也 13
定义了一个叫myUrl的属性，我们就被迫要修改代码，这是成本很高且让人沮丧的事情。
14
AngularJS允许通过创建新的子作用域或者隔离作用域来解决这个常见问题。

同之前在当前作用域介绍中介绍的继承作用域（子作用域）不同，隔离作用域同当 15
前DOM的作用域是完全分隔开的。为了给这个新的对象设置属性，我们需要显式地通
过属性传递数据，同在JavaScript或Ruby中给方法传递参数类似。
16
当用如下代码将指令的作用域设置成一个只包含它自己的属性的干净对象时：

scope: { 17
someProperty: "needs to be set"
}
实际上创造的是隔离作用域。本质上，意味着指令有了一个属于自己的$scope对象，这个对 18