Page 75 - AngularJS权威教程

8.2 向指令中传递数据 55

在这个流程中，给两个方向的绑定都添加一个文本输入字段。通过这两个输入字段可以方便 1
地观察作用域是如何在DOM中通过原型继承链接在一起的 ：
①
<label>Their URL field:</label> 2
<input type="text" ng-model="theirUrl">
<div my-directive
some-attr="theirUrl"
my-link-text="Click me to go to Google"></div> 3
angular.module('myApp', [])
.directive('myDirective', function() {
return { 4
restrict: 'A',
replace: true,
scope: { 5
myUrl: '=someAttr', // 经过了修改
myLinkText: '@'
},
template: '\ 6
<div>\
<label>My Url Field:</label>\
<input type="text"\ 7
ng-model="myUrl" />\
<a href="{{myUrl}}">{{myLinkText}}</a>\
</div>\
}; 8
});
在线示例：http://jsbin.com/IteNita/1/edit。
9
在Chrome开发者工具中一边在两个文本输入字段中输入内容，一边审查href属性的值，如
图8-8所示，酷。 10

11

12

13
图8-8 Chrome开发者工具

除了将原来的文本输入字段添加回主HTML文档外，唯一的修改是用=绑定策略代替了@。 14

总地来说，这个例子展示了双向数据绑定的神奇效果，它是AngularJS的主要卖点之一。
了解内部指令的工作原理非常重要，这样才能在同自定义指令一起使用时把它们的行为考虑在内。 15

下一章我们会详细介绍AngularJS的内置指令，以便了解如何使用它们以及它们存在的意义。
16
了解完内置指令，第10章将详细介绍创建自定义指令时的高级设置。

最后，我们会创建自定义指令，然后讨论应用架构，在这个话题中自定义和内置指令都非常 17
重要。
—————————— 18
① 这个描述不是很准确，原型继承的机制应该是在AngularJS的JavaScript代码中而非DOM中实现的。——译者注