javascript - Angularjs 指令 : Isolated scope and attrs

Question

请看例子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 作者编写的，因此我希望有一个原因。

谢谢。

Answer 1

what is the purpose of attrs?

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

1. 它们是将信息传递到使用隔离范围的指令的唯一方法。由于指令 isolate 作用域的原型(prototype)不是从父作用域继承的，因此我们需要一种方法来指定要传递给 isolate 作用域的内容。因此，“对象哈希”中的“@”、“=”和“&”都需要一个属性来指定要传递的数据/信息。
2. 它们用作指令间通信机制。 (例如，Managing communication between independent AngularJS directives independently)
3. 他们 normalize属性名称。

Can't one access all the attributes passed through attrs?

是的，你可以，但是

1. 您将没有任何数据绑定(bind)。
   '@'设置单向“字符串”数据绑定(bind)(父作用域→指令隔离作用域)使用@，你在指令中看到/得到的值总是一个字符串，所以如果你是试图将对象传递给您的指令。
   '=' 设置双向数据绑定(bind)(父范围 ↔ 指令隔离范围)。
   如果没有数据绑定(bind)，你的指令就不能自动 $watch 或 $observe 模型/数据变化。
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() 来获取插值。)

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)并且不需要插值。)