Angular JS - 在模板中ngRepeat

Question

我試圖在指令中使用ngRepeat - 但我真的不知道該怎麼做。我關門了嗎？

割草機是我的控制器中使用此指令的數組。

.directive('slider', function() { 
return function() { 
    template: '<slider><film><frame ng-repeat="mower in mowers">{{mower.series}}</frame></film></slider>'; 
    replace: true; 
     scope: true; 
    link: function postLink(scope, iElement, iAttrs) { 
      // jquery to animate 
     } 
    } 
}); 

Answer 1

是的，你很接近，但語法是關閉的。你需要在你的示波器上指定mowers。

.directive('slider', function() { 
return { 
    restrict: 'E', //to an element. 
    template: '<film><frame ng-repeat="mower in mowers">{{mower.series}}</frame></film>', 
    replace: true, 
    scope: true, // creates a new child scope that prototypically inherits 
    link: function postLink(scope, iElement, iAttrs) { 
      scope.mowers = [ 
       { series: 1 }, 
       { series: 2 }, 
       { series: 3 } 
      ]; 
     } 
    } 
}); 

此外，您自己不需要參考<slider>。

上面的代碼還假定您已經爲<film>和<frame>發出了指令。

最後，如果你想割草機陣列從外部範圍傳遞，你會改變你的範圍設置爲這樣：

scope: { 
    mowers: '=' 
} 

然後你可以設置它像這樣：

<slider mowers="myMowers"></slider> 

其中myMowers是您的控制器或父指令的作用域上的變量。

我希望有幫助。