Директива AngularJS работает до того, как элемент полностью загружен

Question

У меня есть директива, прикрепленная к динамически генерируемому элементу <table> внутри шаблона. Директива управляет DOM этой таблицы внутри функции link. Проблема в том, что директива выполняется до отображения таблицы (путем оценки директив ng-repeat) - тогда таблица пуста.

Вопрос

Как я могу убедиться, что директива побежал после того, как таблица была полностью оказана?

<table directive-name> 
    <tr ng-repeat="..."> 
     <td ng-repeat="..."></td> 
    </tr> 
</table> 


module.directive("directiveName", function() { 
    return { 
     scope: "A", 
     link: function(scope, element, attributes) { 
      /* I need to be sure that the table is already fully 
       rendered when this code runs */ 
     } 
    }; 
}); 

Answer 1

Вы не можете в общем смысле быть «полностью уверенным», просто указав на элемент <table>.

Но вы можете быть уверены в некоторых случаях. В вашем случае, если внутренний контент ng-repeat -ed, то если массив элементов, над которыми работает ngRepeat, готов, то фактические элементы DOM будут готовы в конце цикла дайджеста. Вы можете захватить его после $timeout с 0 задержкой:

link: function(scope, element){ 
    $timeout(function(){ 
    console.log(element.find("tr").length); // will be > 0 
    }) 
} 

Но, в общем смысле, вы не можете быть уверены, чтобы захватить содержимое. Что делать, если массив ngRepeat еще не существует? Или что, если вместо этого есть ng-include?

<table directive-name ng-include="'templates/tr.html'"> 
</table> 

Или, что если есть пользовательские директивы, которые работали по-другому, чем ngRepeat делает?

Но если у вас есть полный контроль над содержимым, один из возможных способов знать, чтобы включить некоторые вспомогательные директивы в качестве внутреннего/последнего элемента, и он связаться с его родителем directiveName, когда это связано:

<table directive-name> 
    <tr ng-repeat="..."> 
     <td ng-repeat="..."> 
      <directive-name-helper ng-if="$last"> 
     </td> 
    </tr> 
</table> 

.directive("directiveNameHelper", function(){ 
    return { 
    require: "?^directiveName", 
    link: function(scope, element, attrs, ctrl){ 
     if (!ctrl) return; 

     ctrl.notifyDone(); 
    } 
    } 
}) 

Answer 2

Try обертывание в $timeout код из вашей функции связи, как он будет выполнять после того, как DOM визуализируется.

$timeout(function() { 
    //do your stuff here as the DOM has finished rendering already 
}); 

Не забудьте вводить $timeout в вашей директиве:

.directive("directiveName", function($timeout) { 

Есть много альтернатив, но я думаю, что это один чище, как $ таймаут выполняется после того, как движок рендеринга завершил свою работу ,

Answer 3

Чистым способом было бы использовать что-то вроде lodash's _.defer method.

Вы можете позвонить ему с помощью _.defer(your_func, your_func_arg1, your_func_arg2, ...) внутри вашей ссылки, чтобы выполнить метод, когда текущий стек вызовов очищен и все готово.

Таким образом, вы не должны оценивать $timeout самостоятельно.