Angularjs指令:隔离的范围和attrs
请看这里的例子
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需要readonly
symbol
max
,以便在隔离的作用域对象中定义从父作用域访问它。
它在这里使用
<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>
那么, attrs
的目的是什么呢? 不能访问通过attrs
传递的所有属性。 为什么不能访问最大值为attrs.max
而不是scope.max
为什么要像attrs.max = scope.max
那样分配?
由于这个应用程序是由Angular作者编写的,我期待一个理由。
谢谢。
attrs的目的是什么?
在与您的指令相同的元素上定义的属性有几个目的:
- 它们是将信息传递到使用隔离范围的指令的唯一方法。 由于指令隔离范围没有从父范围原型inheritance,所以我们需要一种方法来指定我们想要传递给隔离范围的内容。 “对象散列”中的“@”,“=”和“&”因此每个都需要一个属性来指定传递哪些数据/信息。
- 他们作为一个互相指导的沟通机制。 (例如, 独立pipe理独立的AngularJS指令之间的通信 )
- 他们规范了属性名称。
不能访问通过attrs传递的所有属性吗?
是的,你可以,但是
- 你将不会有任何数据绑定。
'@'设置单向“string”数据绑定(父范围→指令隔离范围)使用@你在指令中看到/得到的值总是一个string,所以如果你想通过一个string反对你的指示。
'='设置双向数据绑定(父范围↔指令隔离范围)。
没有数据绑定,你的指令不能自动监视模型/数据。 -
{{}}
的属性值会导致你的问题,因为它们不会被内插。
假设我们有<my-directive name="My name is {{name}}">
,父范围有$scope.name='Mark'
。 然后,在链接函数中,console.log(attrs.name)
导致undefined
。
如果name是用'@'定义的孤立范围属性,则attrs.$observe('name', function(val) { console.log(val) })
结果My name is Mark
。 (请注意,在链接函数中,必须使用$ observe()来获取插值。)
为什么不能访问最大值为attrs.max而不是scope.max
上面回答
为什么要像attrs.max = scope.max那样分配?
我能想到的唯一原因是为了防止其他指令需要看到这个属性/值(即指令间通信)。 然而,另一个指令需要在这个指令之后运行(这可以通过priority
指令设置来控制)。
总结:在一个隔离范围的指令中,通常你不想使用attrs
。 (我想这可能是一种将初始化数据/值发送到指令的方式 – 也就是说,如果您不需要这些值的数据绑定,并且不需要插值)。
使用attrs你可以访问html标签中定义的属性
<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true">
所以在这种情况下,您将可以访问符号和只读属性。 您在自定义指令中定义的每个属性都可用于attrsvariables。
该块:
attrs.max = scope.max = parseInt(scope.max || 5, 10);
将parsing和分配当前scope.max值或5 ,如果不存在,则为scope.max和attrs.max。 这样, 你可以从attrs.max中读取作业 。 在此之前,attrs.max属性中的undefined。
检查fmRating.js源码,我不知道为什么/何地/何时使用这段代码。