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更改，则可以使用隔离范围和数据绑定。

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属性。新范围与父范围隔离，这意味着它不会从父范围原型继承。因此，它是创建可重用组件的好工具包。

=符号双向地将rating属性绑定到指令范围的rating属性。这意味着scope.rating会在aRating更改时更新，aRating会在scope.rating更改时更新。

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

AngularJS ng-repeat键值对指令

1 个答案: