Угловая. Пользовательская директива с ng-repeat внутри

Question

У меня есть настраиваемая директива с ng-repeat внутри. Шаблон Ng повторов выглядит как

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

После создания всех элементов с помощью нг-повторять мне нужно, чтобы заполнить каждый холст с другой линией. Я пытался сделать это в функции связи моей директивы:

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); 
    }); 
} 

Но, как я писал выше, не работает, потому что, когда я называю $ .each, нг-повтор не оказали соответствующее расположение. Как мне переписать мой код?

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, будет оказана.