結合納克指令

我有一個自定義的指令，「我的中繼器」下面的代碼：結合納克指令

<div ng-controller="AngularCtrl"> 
    <div my-repeater='{{items}}'>Click here</div> 
</div>

這裏是我的自定義指令：

myApp.directive('myRepeater', function($compile) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var myTemplate = "<div ng-click='updateRating({{item}});' ng-class='getRatingClass({{rating}});'>{{rating}}</div>"; 
      var items = scope.items; 
      console.log('length: ' + items.length); 
      for (var i = 0; i < items.length; i++) { 
       var child = scope.$new(true); 
       console.log(items[i].ratings); 
       child.item = items[i]; 
       child.rating = items[i].ratings;      
       var text = $compile(myTemplate)(child); 
       element.append(text); 
      } 
    } 
};

}）;

ng-click and ng-class綁定在我的自定義指令中沒有正確地發生。任何人都可以幫助我在這裏做錯了嗎？

這是JS小提琴。 http://jsfiddle.net/JSWorld/4Yrth/5/

來源

2012-12-29 Sabarish Sankar

嗨我已將您的示例更新爲我認爲您想要做的事。

http://jsfiddle.net/46Get/2/

首先，像ng-click='updateRating({{item}});'那指令收到你不需要使用表達式「{{}}」，因爲它是在範圍已經執行。
其次，當你需要的兄弟姐妹添加到您的指令，你需要做的是在編譯階段，而不是鏈接階段或只使用NG-重複爲此事

來源

2012-12-29 11:27:53 rseidi

謝謝rseidi！但我不想用ng-repeat。我正面臨嵌套的ng-repeats問題，因爲它堆積了堆內存。因此我想寫我自己的ng-repeat自定義指令，因此我想出了這個。你能不能使用ng-repeat來幫助我獲得這個綁定？ –

Humm，我沒有看到這個問題在哪裏會比使用ngRepeat更好，你在什麼時候顯示多少項？你真的想做什麼？ – rseidi

我大約有150 * 150個物品要顯示。所以嵌套的ng-repeat對我不起作用。所以我必須去寫客戶之一。請參閱本文以供參考。 http://stackoverflow.com/questions/14065050/angular-js-consumes-more-browser-memory/ –

我加.ng-scope { border: 1px solid red; margin: 2px}到@ rseidi的答案/小提琴，我發現範圍正在由$ compile服務爲模板中的每個項目創建 - 即每個<div>。既然你有很多項目要展示，我認爲更少的範圍會更好。在嘗試了大量不同的事情之後，我發現Angular似乎爲每個「頂級」元素創建了一個新的範圍。因此，一個解決方案是創建一個外的div - 即確保只有一個「頂級」的元素：

var mainTpl = '<div>'; // add this line 
... 
for(...) { } 
mainTpl += '</div>'; // add this line

Fiddle

現在，只有外層的div創建了一個範圍，因爲只有現在一個「頂級」元素，而不是每個項目一個。

來源

2012-12-29 19:18:30

太棒了！非常感謝Mark！ –

結合納克指令

回答

相關問題