AngularJS NG-重复键 - 值对指令

我有以下HTML：AngularJS NG-重复键 - 值对指令

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

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

指令必须看起来能够使用aRating对象么？

来源

2014-12-06 Brian Johnson

你可以发送一个plunker示例的content.ratings和aRating吗？评级与对象做什么？ – 2014-12-06 03:38:27

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更改时更新，将在scope.rating更改时更新。

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

来源

2014-12-06 03:40:34

AngularJS NG-重复键 - 值对指令

回答

相关问题