自定義指令顯示當我使用它的不同的結果NG-重複NG重複內

自定義指令表示不期望的結果自定義指令顯示當我使用它的不同的結果NG-重複NG重複內

我創建指令，它可以接受不同的值，我把它和它的工作片，但是當我使用這個指令內NG-重複其顯示每個迭代

這裏同樣的結果就是指令：

.directive("rating", function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: true, 
     link: function ($scope, $element, $attrs) { 
      $scope.flavor = $attrs.value; 
      $scope.getStars = function() { 
       var size = $scope.flavor/5 * 100; 
       return size; 
      } 
     }, 
     template: '<span ng-bind="getStars()"></span>' 
    } 
});

，當我把它稱爲這樣的做工精細和秀預期結果

<rating value="1"></rating> // <span>20</span> 
<rating value="2"></rating> // <span>40</span> 
<rating value="3"></rating> // <span>60</span>

但是當我在ng中使用它時 - 重複它的每次迭代顯示相同的結果，即使值是不同的，因爲它來自$ index。

<div ng-repeat="review in vm.reviews"> 
    <rating value="{{$index+1}}"></rating> 
</div> 
// <span>20</span> 
// <span>20</span> 
// <span>20</span>

我希望得到的結果是

// <span>20</span> 
// <span>40</span> 
// <span>60</span>

我認爲這個問題在$ scope.flavor應該有辦法，迫使它在每次迭代

來源

2017-01-22 ahmdabos

'''templateUrl'''是錯誤的，如果您傳遞一些HTML而不是URL，則應該使用'''template'''。此外，如果您傳遞值1,2,3，getStars返回20,40,60，而不是您的預期結果。你有一些小提琴可以分享嗎？ – Dario

它可以在更新我的plunker example。所以你現在做錯了什麼。

但實際上我會以另一種方式做到這一點。如果您將某些內容傳遞到指令的$scope，則無需在{{}}中包裝value=屬性。只是使您的directive的$scope分離並明確指定value是表達式（'<'或'='）。

scope: { 
    value: '<' 
}

然後你就可以在你的link功能通過$scope.value達到它。這裏也是plunker。

來源

2017-01-22 16:37:25 GProst

自定義指令顯示當我使用它的不同的結果NG-重複NG重複內

回答

相關問題