Page 73 - AngularJS权威教程

8.2 向指令中传递数据 53

回到主题，我们用属性将数据从DOM中复制到指令的隔离作用域中： 1

<div my-directive
my-url="http://google.com"
my-link-text="Click me to go to Google"></div> 2

angular.module('myApp', [])
.directive('myDirective', function() { 3
return {
restrict: 'A',
replace: true,
scope: { 4
myUrl: '@', //绑定策略
myLinkText: '@' //绑定策略
}, 5
template: '<a href="{{myUrl}}">' +
'{{myLinkText}}</a>'
}; 6
});

在线示例：http://jsbin.com/eloKoDI/1/edit。 7

默认情况下约定DOM属性和JavaScript中对象属性的名字是一样的（除非对象的属性名采用 8
的是驼峰式写法）。

由于作用域中属性经常是私有的，因此可以（虽然不常见）指定我们希望将这个内部属性同 9
哪个DOM属性进行绑定：
scope: { 10
myUrl: '@someAttr',
myLinkText: '@'
} 11
上面的隔离作用域中的内容是：将指令的私有属性$scope.myUrl同DOM中some-attr属性
的值绑定起来。这个值既可以是硬编码的也可以是当前作用域（例如Some-attr="{{expr- 12
ession}}）中某个表达式的运算结果。

在DOM中要用some-attr代替my-url： 13

<div my-directive
some-attr="http://google.com"
my-link-text="Click me to go to Google" > 14
</div>
更进一步，还可以在DOM对应的作用域上运算表达式，并将结果传递给指令，在指令内部 15
最终被绑定在属性上：

<div my-directive 16
some-attr="{{ 'http://' + 'google.com' }}">
</div>
在此之上，我们来看看如何创建一个文本输入域，并将输入值同指令内部隔离作用域的属性 17
绑定起来：
18