javascript - AngularJS ng-repeat 键值对指令

Question

我有以下 HTML:

<p data-ng-repeat="(aName, aRating) in content.ratings">
    <div star-directive rating="aRating"></div>
</p>

aRating 是一个对象。该指令当前选择“aRating”作为评级变量的文本。

指令必须是什么样子才能使用 aRating 对象？

Answer 1

attrs. rating 是您为属性设置的表达式字符串。您可以使用 scope.$eval() 根据范围对其进行评估。

angular.module('your-module')
.directive('starDirective', function() {
  return {
    restrict: 'A',
    scope: false,
    link: function(scope, element, attrs) {
      var ratingExpression = attrs.rating;
      var rating = scope.$eval(attrs.rating);

      // Do something with rating.
    }
  }
});

scope: false 是默认值，这意味着该指令不会创建新的作用域并与其父级共享作用域。

但是，上述指令不会知道 aRating 何时更新。如果您希望随着 aRating 的变化而更新指令，您可以使用隔离范围和数据绑定(bind)。

angular.module('your-module')
.directive('starDirective', function() {
  return {
    restrict: 'A',
    scope: {
      rating: '=rating'
    },
    link: function(scope, element, attrs) {
      // `rating` object is available as `scope.rating` and it will keep updated.
    }
  }
});

这将为指令创建一个新范围，并将 aRating 与新创建范围的 rating 属性绑定(bind)。新作用域与父作用域隔离，这意味着它不会从父作用域原型(prototype)继承。因此，它是创建可重用组件的一个很好的工具包。

= 符号将 rating 属性双向绑定(bind)到指令范围的 rating 属性。这意味着当 aRating 更改时，scope. rating 将更新，当 scope.ating 更改时，aRating 将更新.

如果您对隔离范围感兴趣，请参阅 Angular's documentation了解更多详情。