角。自定義指令與ng-repeat內部

Question

我有一個自定義指令與ng-repeat內部。 伍重複的模板看起來像

<div ng-repeat='(key, item) in items'> 
    <canvas id='canvas-{{ key }}'></canvas> 
</div> 

使用創建的所有項目後，NG-重複我需要填寫不同的行中的每個畫布。 我試着我的指令鏈接功能內做到這一點：

link: function(scope, element) { 
    scope.items = /* some data */ 
    $.each(items, function(key, item) { 
     // some logic here with canvas like 
     var drawingCanvas = document.getElementById('canvas-' + key); 
     var context = drawingCanvas.getContext("2d"); 
     context.beginPath(); 
     context.moveTo(0, 0); 
     context.lineTo(200, 100); 
    }); 
} 

但我寫了上面的方法不起作用，因爲當我打電話$。每次，NG-重複並沒有呈現相應的佈局。 我應該如何重寫我的代碼？

Answer 1

使用$timeout，這將做伎倆。 $timeout將強制$digest cicle將觸發ngRepeat指令迫使它呈現結果。

$timeout(function(){ 
    scope.items = /* some data */ 
    $.each(items, function(key, item) { 
     // some logic here with canvas like 
     var drawingCanvas = document.getElementById('canvas-' + key); 
     var context = drawingCanvas.getContext("2d"); 
     context.beginPath(); 
     context.moveTo(0, 0); 
     context.lineTo(200, 100); 
    }); 
},0); 

Answer 2

使用後鏈接功能：

link: { 
    pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 
    post: function postLink(scope, iElement, iAttrs, controller) { ... } 
} 

的時候鏈接功能後執行，HTML代碼將被渲染。