Angularjs指令:隔离范围和attrs

Question

请看这里的例子

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);
...

角需要symbol,max,readonly以在所述分离的范围对象从父范围访问它来限定.

它在这里使用

<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>

那么,目的是attrs什么？无法访问所有传递的属性attrs.为什么不能访问max的值attrs.max而不是scope.max

为什么要分配回来attrs.max = scope.max？

由于这个应用程序是由Angular作者编写的,我希望有一个理由.

谢谢.

Answer 1

激光的目的是什么？

在与指令相同的元素上定义的属性有以下几个目的:

1. 它们是将信息传递到使用隔离范围的指令的唯一方法.由于指令隔离范围不是从父范围原型继承,我们需要一种方法来指定我们想要传递给隔离范围的内容.因此,"对象散列"中的"@","="和"&"都需要一个属性来指定传递的数据/信息.
2. 它们是一种跨指令的沟通机制.(例如,独立管理独立AngularJS指令之间的通信)
3. 它们标准化属性名称.

无法访问通过attrs传递的所有属性？

是的你可以,但是

1. 你不会有任何数据绑定.
   '@'设置单向"字符串"数据绑定(父范围→指令隔离范围)使用@,您在指令中看到/获取的值始终是一个字符串,因此如果您尝试传递一个字符串,请不要使用此值反对你的指令.
   '='设置双向数据绑定(父范围↔指令隔离范围).
   没有数据绑定,您的指令不能自动观察或观察模型/数据的变化.
2. 带有{{}}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()来获取插值.)

为什么不能将max的值作为attrs.max而不是scope.max访问

以上回答

为什么要像attrs.max = scope.max一样返回？

我可以想到这样做的唯一原因是,一些其他指令需要查看此属性/值(即,指令间通信).但是,另一个指令需要在此指令之后运行才能使其工作(可以使用priority指令设置稍微控制一下).

总结:在具有隔离范围的指令中,通常您不想使用attrs.(我想这可能是一种将初始化数据/值发送到指令中的方法 - 即,如果您不需要对这些值进行数据绑定,则不需要插值.)