Page 74 - AngularJS权威教程

54 第 8 章 指令简介

注意在输入标签上使用了内置指令ng-model。这个指令可以将输入文本同
$scope上的myUrl属性进行绑定。

<input type="text" ng-model="myUrl" />
<div my-directive
some-attr="{{ myUrl }}"
my-link-text="Click me to go to Google">
</div>

这段代码是可以工作的，但如果我们将文本输入字段移到指令内部并在另一个指令中进行绑
定，就无法正常工作了：

<div my-directivesome-attr="{{ myUrl }}"
my-link-text="Click me to go to Google">
</div>
还有下面这段代码：
template: '<div>\
<input type="text" ng-model="myUrl" />\
<a href="{{myUrl}}">{{myLinkText}}</a>\
</div>'
通过观察Chrome开发者工具中的href可以知道，我们并没有错误地将内部$scope的属性
myUrl同外部的DOM属性some-attr绑定在一起。值是通过对DOM属性进行复制被传递到隔离作
用域中的，难道它不应该同时设置同名属性的值吗？如图8-7所示。

图8-7 Chrome开发者工具

出现这种现象的原因是，内置指令ng-model在它自身内部的隔离作用域和DOM的作用域（由
控制器提供）之间创建了一个双向数据绑定。
让我们来模仿一下这个设置过程以使例子能正工作。我们的目标是理解双向数据绑定，以及
ng-model在这个过程中的行为。

双向数据绑定或许是AngularJS中最重要且无法通过jQuery简单实现的功能之一。我们需要自
己实现它进而了解它的神奇效果，幸好，所需工作并不多。接下来在我们的隔离作用域和ng-model
内部的隔离作用域之间创建一个双向数据绑定，这样我们的例子就完整了。将内部的
$scope.myUrl属性同当前控制器作用域中的theirUrl属性进行绑定，在DOM中通过作用域查询
来实现这个绑定。