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-重複鍵 - 值對指令

回答

相關問題