请看例子here
foodMeApp.directive('fmRating', function() {
return {
restrict: 'E',
scope: {
symbol: '@',
max: '@',
readonly: '@'
},
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
attrs.max = scope.max = parseInt(scope.max || 5, 10);
...
Angular 需求symbol
, max
, readonly
在隔离作用域对象中定义,以便从父作用域访问它。
它被使用here
<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>
那么,attrs
的目的是什么? ?不能访问通过 attrs
传递的所有属性吗? .为什么不能将 max 的一个访问值设为 attrs.max
而不是 scope.max
为什么像attrs.max = scope.max
一样分配回去?
由于此应用是由 Angular 作者编写的,因此我希望有一个原因。
谢谢。
最佳答案
what is the purpose of attrs?
在与您的指令相同的元素上定义的属性有几个目的:
- 它们是将信息传递到使用隔离范围的指令的唯一方法。由于指令 isolate 作用域的原型(prototype)不是从父作用域继承的,因此我们需要一种方法来指定要传递给 isolate 作用域的内容。因此,“对象哈希”中的“@”、“=”和“&”都需要一个属性来指定要传递的数据/信息。
- 它们用作指令间通信机制。 (例如,Managing communication between independent AngularJS directives independently)
- 他们 normalize属性名称。
Can't one access all the attributes passed through attrs?
是的,你可以,但是
- 您将没有任何数据绑定(bind)。
'@'设置单向“字符串”数据绑定(bind)(父作用域→指令隔离作用域)使用@,你在指令中看到/得到的值总是一个字符串,所以如果你是试图将对象传递给您的指令。
'=' 设置双向数据绑定(bind)(父范围 ↔ 指令隔离范围)。
如果没有数据绑定(bind),你的指令就不能自动 $watch 或 $observe 模型/数据变化。 - 属性值为
{{}}
s 会给你带来问题,因为它们不会被插入。
假设我们有<my-directive name="My name is {{name}}">
父范围有$scope.name='Mark'
.然后,在链接函数内部,console.log(attrs.name)
结果undefined
.
如果名称是用“@”定义的隔离范围属性,则attrs.$observe('name', function(val) { console.log(val) })
结果My name is Mark
. (请注意,在链接函数内部,必须使用 $observe() 来获取插值。)
Why can't one access value of max as attrs.max instead of scope.max
上面回答
Why assign back like attrs.max = scope.max ?
我能想到的这样做的唯一原因是万一其他指令需要看到这个属性/值(即指令间通信)。但是,其他指令需要在此指令之后运行才能正常工作(这可以通过 priority
指令设置进行某种程度的控制)。
总结:在具有隔离范围的指令中,通常您不想使用 attrs
. (我想这可能是一种将初始化数据/值发送到指令中的方法——也就是说,如果您不需要对这些值进行数据绑定(bind)并且不需要插值。)
关于javascript - Angularjs 指令 : Isolated scope and attrs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14300986/