Виклик функції, коли ng-повторення закінчено

Те, що я намагаюся реалізувати, це в основному обробник "на повторне завершене надання". Я в змозі виявити, коли це робиться, але я не можу зрозуміти, як запустити функцію від нього.

Перевірте загадку: http://jsfiddle.net/paulocoelho/BsMqq/3/

JS

var module = angular.module('testApp', [])
    .directive('onFinishRender', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                element.ready(function () {
                    console.log("calling:"+attr.onFinishRender);
                    // CALL TEST HERE!
                });
            }
        }
    }
});

function myC($scope) {
    $scope.ta = [1, 2, 3, 4, 5, 6];
    function test() {
        console.log("test executed");
    }
}

HTML

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>

Відповідь : Робоча скрипка від закінчення руху : http://jsfiddle.net/paulocoelho/BsMqq/4/

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

Зауважте, що я не використовував, .ready()а скоріше загорнув його в $timeout. $timeoutпереконуєсь, що він виконується, коли ng-повторювані елементи дійсно закінчили відображення (тому що $timeoutволя виконується в кінці поточного циклу дайджесту - і він також буде викликати $applyвнутрішньо, на відміну відsetTimeout ). Тож після ng-repeatзавершення роботи ми використовуємо $emitдля передачі події на зовнішні області (брати і сестри та батьки).

А потім у своєму контролері ви можете його спіймати $on:

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...
});

З html, який виглядає приблизно так:

<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
    <div>{{item.name}}}<div>
</div>

Використовуйте $ evalAsync, якщо ви хочете, щоб ваш зворотний виклик (тобто тест ()) був виконаний після побудови DOM, але до надання браузера. Це запобіжить мерехтіння - посилання .

if (scope.$last) {
   scope.$evalAsync(attr.onFinishRender);
}

Скрипка .

Якщо ви дійсно хочете зателефонувати своєму зворотному дзвінку після надання, використовуйте $ timeout:

if (scope.$last) {
   $timeout(function() { 
      scope.$eval(attr.onFinishRender);
   });
}

Я віддаю перевагу $ eval замість події. Для події нам потрібно знати назву події та додати код до нашого контролера для цієї події. З $ eval менше зв'язок між контролером та директивою.

Відповіді , які були дані до сих пір працює тільки в перший раз , що ng-repeatвізуалізується , але якщо у вас є динаміка ng-repeat, а це означає , що ви збираєтеся додавати / видаляти / фільтрації елементів, і ви повинні бути повідомлені кожен раз, коли ng-repeatбуде винесено, ці рішення не працюватимуть для вас.

Отже, якщо вам потрібно буде повідомляти КОЖНЕ ЧАС про те, що оновлення буде ng-repeatповторно, і не тільки в перший раз, я знайшов спосіб це зробити, це досить "хакі", але це буде добре, якщо ви знаєте, що ви є робити. Використовуйте це $filterу своєму, ng-repeat перш ніж використовувати будь-яке інше$filter :

.filter('ngRepeatFinish', function($timeout){
    return function(data){
        var me = this;
        var flagProperty = '__finishedRendering__';
        if(!data[flagProperty]){
            Object.defineProperty(
                data, 
                flagProperty, 
                {enumerable:false, configurable:true, writable: false, value:{}});
            $timeout(function(){
                    delete data[flagProperty];                        
                    me.$emit('ngRepeatFinished');
                },0,false);                
        }
        return data;
    };
})

Це буде $emitподія, яку називають ngRepeatFinishedкожного разу, коли ng-repeatотримуються.

Як ним користуватися:

<li ng-repeat="item in (items|ngRepeatFinish) | filter:{name:namedFiltered}" >

ngRepeatFinishФільтр повинен бути застосований безпосередньо до Arrayабо Objectвизначено в вашому $scope, ви можете застосувати інші фільтри після.

Як НЕ ним користуватися:

<li ng-repeat="item in (items | filter:{name:namedFiltered}) | ngRepeatFinish" >

Не застосовуйте спочатку інші фільтри, а потім застосуйте ngRepeatFinishфільтр.

Коли я повинен використовувати це?

Якщо ви хочете застосувати певні стилі css до DOM після завершення візуалізації списку, оскільки вам потрібно врахувати нові розміри елементів DOM, які були рендеровані ng-repeat. (BTW: такі операції слід робити в рамках директиви)

ЧОГО НЕ ДІЙТИ у функції, яка обробляє ngRepeatFinishedподію:

• Не виконайте $scope.$applyфункції в цій функції, або ви поставите Angular у нескінченний цикл, який Angular не зможе виявити.

• Не використовуйте його для внесення змін у $scopeвластивості, оскільки ці зміни не відображатимуться у вашому представленні до наступного $digestциклу, а оскільки ви не можете виконати, $scope.$applyвони не принесуть ніякої користі.

"Але фільтри не використовуються таким чином !!"

Ні, вони не є, це хак, якщо вам це не подобається, не використовуйте. Якщо ви знаєте кращий спосіб здійснити те саме, будь ласка, дайте мені це знати.

Узагальнення

Це злом , і використовувати його неправильним чином небезпечно, використовуйте його лише для застосування стилів після ng-repeatзавершення візуалізації, і у вас не повинно виникнути жодних проблем.

Якщо вам потрібно викликати різні функції для різних ng-повторів на одному контролері, ви можете спробувати щось подібне:

Директива:

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
            $timeout(function () {
                scope.$emit(attr.broadcasteventname ? attr.broadcasteventname : 'ngRepeatFinished');
            });
            }
        }
    }
});

У своєму контролері ловіть події за допомогою $ on:

$scope.$on('ngRepeatBroadcast1', function(ngRepeatFinishedEvent) {
// Do something
});

$scope.$on('ngRepeatBroadcast2', function(ngRepeatFinishedEvent) {
// Do something
});

У вашому шаблоні з декількома ng-повторами

<div ng-repeat="item in collection1" on-finish-render broadcasteventname="ngRepeatBroadcast1">
    <div>{{item.name}}}<div>
</div>

<div ng-repeat="item in collection2" on-finish-render broadcasteventname="ngRepeatBroadcast2">
    <div>{{item.name}}}<div>
</div>

Інші рішення будуть добре працювати при початковому завантаженні сторінки, але виклик $ timeout з контролера - єдиний спосіб забезпечити виклик вашої функції при зміні моделі. Ось робоча скрипка, яка використовує $ timeout. Для вашого прикладу це було б:

.controller('myC', function ($scope, $timeout) {
$scope.$watch("ta", function (newValue, oldValue) {
    $timeout(function () {
       test();
    });
});

ngRepeat буде оцінювати директиву лише тоді, коли вміст рядка новий, тому якщо ви вилучите елементи зі свого списку, onFinishRender не запуститься. Наприклад, спробуйте ввести значення фільтра в цьому Фіделя випустив .

Якщо ви не проти використовувати реквізити з двома доларами, і ви пишете директиву, єдиний вміст якої є повторення, є досить просте рішення (якщо ви тільки піклуєтесь про початковий показ). У функції посилання:

const dereg = scope.$watch('$$childTail.$last', last => {
    if (last) {
        dereg();
        // do yr stuff -- you may still need a $timeout here
    }
});

Це корисно для випадків, коли у вас є директива, яка повинна робити маніпування DOM на основі ширини або висоти членів винесеного списку (що, на мою думку, є найбільш вірогідною причиною, щоб хтось задав це запитання), але це не настільки загально як інші запропоновані рішення.

Вирішення цієї проблеми з відфільтрованим ngRepeat могло бути з подіями мутації , але вони застарілі (без негайної заміни).

Тоді я придумав ще одне легке:

app.directive('filtered',function($timeout) {
    return {
        restrict: 'A',link: function (scope,element,attr) {
            var elm = element[0]
                ,nodePrototype = Node.prototype
                ,timeout
                ,slice = Array.prototype.slice
            ;

            elm.insertBefore = alt.bind(null,nodePrototype.insertBefore);
            elm.removeChild = alt.bind(null,nodePrototype.removeChild);

            function alt(fn){
                fn.apply(elm,slice.call(arguments,1));
                timeout&&$timeout.cancel(timeout);
                timeout = $timeout(altDone);
            }

            function altDone(){
                timeout = null;
                console.log('Filtered! ...fire an event or something');
            }
        }
    };
});

Це приєднується до методів Node.prototype батьківського елемента з одноразовим позначкою $ timeout, щоб слідкувати за послідовними модифікаціями.

Це працює в основному правильно, але я отримав деякі випадки, коли altDone буде викликатися двічі.

Знову ж таки… додайте цю директиву до батьківського елемента ngRepeat.

Дуже легко, ось як я це зробив.

.directive('blockOnRender', function ($blockUI) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            
            if (scope.$first) {
                $blockUI.blockElement($(element).parent());
            }
            if (scope.$last) {
                $blockUI.unblockElement($(element).parent());
            }
        }
    };
})

Погляньте на скрипку http://jsfiddle.net/yNXS2/ . Оскільки створена вами директива не створила нової сфери, я продовжив свій шлях.

$scope.test = function(){... зробив це.

Я дуже здивований, що не бачу найпростішого рішення серед відповідей на це питання. Що ви хочете зробити, це додати ngInitдирективу щодо повторного елемента (елемент із ngRepeatдирективою), що перевіряє $last(спеціальну змінну, встановлену в області застосування, за ngRepeatякою вказується, що повторюваний елемент є останнім у списку). Якщо $lastце правда, ми відображаємо останній елемент і можемо викликати потрібну функцію.

ng-init="$last && test()"

Повний код для розмітки HTML був би:

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" ng-init="$last && test()">{{t}}</p>
</div>

У додатку вам не потрібен додатковий код JS, окрім функції масштабу, яку ви хочете зателефонувати (у цьому випадку test), оскільки ngInitнадається Angular.js. Просто переконайтеся, що ваша testфункція є в області застосування, щоб мати доступ до неї з шаблону:

$scope.test = function test() {
    console.log("test executed");
}