Действительно, вы должны использовать директивы, и нет никакого события, связанного с концом цикла ng-Repeat (так как каждый элемент создается индивидуально и имеет свое собственное событие). Но а) использование директив может быть всем, что вам нужно, и б) есть несколько специфических свойств ng-Repeat, которые вы можете использовать, чтобы сделать ваше событие "on ngRepeat закончено".
В частности, если все, что вам нужно, это стилизовать / добавить события ко всей таблице, вы можете сделать это, используя директиву, которая охватывает все элементы ngRepeat. С другой стороны, если вы хотите обратиться к каждому элементу отдельно, вы можете использовать директиву внутри ngRepeat, и она будет действовать на каждый элемент после его создания.
Тогда, Есть $index
, $first
, $middle
и $last
свойства , которые можно использовать для запуска событий. Итак, для этого HTML:
<div ng-controller="Ctrl" my-main-directive>
<div ng-repeat="thing in things" my-repeat-directive>
thing {{thing}}
</div>
</div>
Вы можете использовать директивы так:
angular.module('myApp', [])
.directive('myRepeatDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('color','blue');
if (scope.$last){
window.alert("im the last!");
}
};
})
.directive('myMainDirective', function() {
return function(scope, element, attrs) {
angular.element(element).css('border','5px solid red');
};
});
Посмотрите это в действии в этом Plunker . Надеюсь, поможет!
myMainDirective
код выполняться только после завершения цикла? Мне нужно обновить полосу прокрутки родительского div.Если вы просто хотите выполнить некоторый код в конце цикла, вот несколько более простой вариант, который не требует дополнительной обработки событий:
Посмотрите живую демонстрацию.
источник
Нет необходимости создавать директиву, особенно просто для
ng-repeat
завершения события.ng-init
делает магию для вас.он
$last
гарантирует, чтоfinished
срабатывает только тогда, когда последний элемент был представлен в DOM.Не забудьте создать
$scope.finished
событие.Удачного кодирования!
РЕДАКТИРОВАТЬ: 23 октября 2016
Если вы также хотите вызвать
finished
функцию, когда в массиве нет элемента, вы можете использовать следующий обходной путьПросто добавьте вышеуказанную строку в верхней части
ng-repeat
элемента. Он проверит, не имеет ли массив никакого значения, и соответственно вызовет функцию.Например
источник
Вот повторяющаяся директива, которая вызывает указанную функцию, когда истина. Я обнаружил, что вызываемая функция должна использовать $ timeout с interval = 0 перед выполнением манипуляций с DOM, таких как инициализация всплывающих подсказок на визуализированных элементах. jsFiddle: http://jsfiddle.net/tQw6w/
В $ scope.layoutDone попробуйте закомментировать строку $ timeout и раскомментировать «НЕ ПРАВИЛЬНО!» линия, чтобы увидеть разницу во всплывающих подсказках.
JS:
источник
Вот простой подход
ng-init
, который не требует специальной директивы. Это хорошо работает для меня в определенных сценариях, например, при необходимости автоматической прокрутки div повторяющихся элементов ng к конкретному элементу при загрузке страницы, поэтому функция прокрутки должна подождать, покаng-repeat
завершится рендеринг в DOM, прежде чем он сможет сработать.Обратите внимание, что это полезно только для функций, которые нужно вызывать один раз после первоначального рендеринга ng-repeat. Если вам нужно вызывать функцию всякий раз, когда обновляется содержимое ng-repeat, вам придется использовать один из других ответов в этой теме с пользовательской директивой.
источник
В дополнение к ответу Павла , что-то более читаемое и легко понятное будет:
Почему еще вы думаете,
angular.noop
есть ли в первую очередь ...?Преимущества:
Вам не нужно писать директиву для этого ...
источник
ng-init="$last && doSomething( )"
Может быть, немного более простой подход с методом
ngInit
Лодашаdebounce
без необходимости специальной директивы:контроллер:
Шаблон:
Обновить
Существует еще более простое решение AngularJS, использующее троичный оператор:
Шаблон:
Имейте в виду, что ngInit использует фазу предварительной компиляции - то есть выражение вызывается до обработки дочерних директив. Это означает, что все еще может потребоваться асинхронная обработка.
источник
ng-init="$last ? refresh() : false"
будет также работать. И это даже не требует Лодаш.Это также может быть необходимо, когда вы проверяете
scope.$last
переменную, чтобы обернуть ваш триггер с помощьюsetTimeout(someFn, 0)
. AsetTimeout 0
- это общепринятая техника в javascript, и яdirective
должен был правильно работать.источник
Это улучшение идей, выраженных в других ответах, чтобы показать, как получить доступ к свойствам ngRepeat ($ index, $ first, $ middle, $ last, $ even, $ odd) при использовании декларативного синтаксиса и изолировать область видимости ( Google рекомендовал лучшие практики) с директивой элемента. Обратите внимание на основную разницу:
scope.$parent.$last
.источник
Я сделал это таким образом.
Создать директиву
После того, как вы добавите его на этикетке, где этот нг-повтор
И готово с этим будет запускаться в конце ng-repeat.
источник
Моим решением было добавить div для вызова функции, если элемент был последним в повторении.
источник
Я хотел бы добавить еще один ответ, так как предыдущие ответы предполагают, что код, необходимый для запуска после выполнения ngRepeat, является угловым кодом, который в этом случае все ответы выше дают отличное и простое решение, некоторые более общие, чем другие, и в случае, если важна стадия жизненного цикла дайджеста, вы можете посмотреть в блоге Бена Наделя об этом, за исключением использования $ parse вместо $ eval.
но по моему опыту, как утверждает OP, он обычно запускает некоторые плагины или методы JQuery на скомпилированном DOM Finnaly, и в этом случае я обнаружил, что самое простое решение - создать директиву с setTimeout, так как функция setTimeout выдвигается до конца очереди браузера, это всегда сразу после того, как все сделано в угловых, обычно ngReapet, который продолжается после того, как его родительская функция postLinking
для тех, кто интересуется, что в таком случае, почему бы не использовать $ timeout, он вызывает другой цикл дайджеста, который совершенно не нужен
источник
Мне пришлось рендерить формулы, используя MathJax после окончания ng-repeat, ни один из приведенных выше ответов не решил мою проблему, поэтому я сделал как показано ниже. Это не очень хорошее решение , но у меня получилось ...
источник
Я нашел ответ здесь хорошо отработанным, но все же необходимо было добавить задержку
Создайте следующую директиву:
Добавьте его к вашему повторителю как атрибут, например так:
По словам Раду,
Для меня это работает, но мне все еще нужно добавить setTimeout
источник
Если вы просто хотите изменить имя класса, чтобы оно отображалось по-разному, приведенный ниже код поможет.
Этот код работал для меня, когда у меня было похожее требование отобразить товар в моем списке покупок шрифтом Strick Trough.
источник