Chamando uma função quando ng-repeat terminar

O que estou tentando implementar é basicamente um manipulador "on ng repeat terminou rendering". Sou capaz de detectar quando isso é feito, mas não consigo descobrir como acionar uma função a partir dela.

Verifique o violino: 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>

Resposta : Violino de trabalho de finishmove: 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);
                });
            }
        }
    }
});

Observe que eu não usei, .ready()mas o envolvi em um $timeout. $timeoutgarante que ele seja executado quando os elementos ng-repetidos REALMENTE terminarem a renderização (porque eles $timeoutserão executados no final do ciclo de compilação atual - e também serão chamados $applyinternamente, ao contráriosetTimeout ). Portanto, após o ng-repeattérmino, usamos $emitpara emitir um evento para escopos externos (escopos irmão e pai).

E então no seu controlador, você pode capturá-lo com $on:

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

Com html que se parece com isso:

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

Use $ evalAsync se desejar que seu retorno de chamada (ou seja, test ()) seja executado após a construção do DOM, mas antes da renderização do navegador. Isso evitará tremulações - ref .

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

Violino .

Se você realmente deseja chamar seu retorno de chamada após a renderização, use $ timeout:

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

Prefiro $ eval em vez de um evento. Com um evento, precisamos saber o nome do evento e adicionar código ao nosso controlador para esse evento. Com $ eval, há menos acoplamento entre o controlador e a diretiva.

As respostas que foram dadas até agora só funcionam na primeira vez em que ng-repeatsão renderizadas , mas se você tiver uma dinâmica ng-repeat, significa que você irá adicionar / excluir / filtrar itens e precisará ser notificado sempre que o ng-repeatfor renderizada, essas soluções não funcionarão para você.

Então, se você precisar ser notificado TODAS AS VEZES de que as imagens ng-repeatsão renderizadas novamente e não apenas a primeira vez, eu encontrei uma maneira de fazer isso, é bastante 'hacky', mas funcionará bem se você souber o que é fazendo. Use isso $filterno seu ng-repeat antes de usar qualquer outro$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;
    };
})

Será $emitum evento chamado ngRepeatFinishedsempre que a ng-repeatrenderização for renderizada.

Como usá-lo:

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

O ngRepeatFinishfiltro precisa ser aplicado diretamente a um Arrayou a um Objectdefinido no seu $scope, você pode aplicar outros filtros depois.

Como NÃO usá-lo:

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

Não aplique outros filtros primeiro e depois aplique o ngRepeatFinishfiltro.

Quando devo usar isso?

Se você deseja aplicar certos estilos css no DOM após a conclusão da renderização da lista, é necessário ter em conta as novas dimensões dos elementos DOM que foram renderizados novamente pelo ng-repeat. (BTW: esse tipo de operação deve ser realizado dentro de uma diretiva)

O que NÃO FAZER na função que lida com o ngRepeatFinishedevento:

• Não execute a $scope.$applynessa função ou você colocará o Angular em um loop infinito que o Angular não poderá detectar.

• Não use-o para fazer alterações nas $scopepropriedades, porque essas alterações não serão refletidas na sua visualização até o próximo $digestloop e, como você não pode executar uma, $scope.$applyelas não serão de uso algum.

"Mas os filtros não devem ser usados ​​assim !!"

Não, eles não são, isso é um hack, se você não gostar, não use. Se você souber uma maneira melhor de realizar a mesma coisa, informe-me.

Resumindo

Isso é um truque , e usá-lo da maneira errada é perigoso, use-o apenas para aplicar estilos após a ng-repeatconclusão da renderização e você não deve ter nenhum problema.

Se você precisar chamar funções diferentes para diferentes repetições ng no mesmo controlador, tente algo como isto:

A diretiva:

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

No seu controlador, capture eventos com $ on:

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

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

No seu modelo com várias repetições 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>

As outras soluções funcionarão bem no carregamento inicial da página, mas chamar $ timeout do controlador é a única maneira de garantir que sua função seja chamada quando o modelo for alterado. Aqui está um violino que usa $ timeout. Para o seu exemplo, seria:

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

O ngRepeat avaliará apenas uma diretiva quando o conteúdo da linha for novo; portanto, se você remover itens da sua lista, o onFinishRender não será acionado. Por exemplo, tente inserir valores de filtro nesses toques emitidos .

Se você não é avesso a usar adereços de escopo com dois dólares e está escrevendo uma diretiva cujo único conteúdo é uma repetição, existe uma solução bastante simples (supondo que você se preocupe apenas com a renderização inicial). Na função de link:

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

Isso é útil nos casos em que você tem uma diretiva que precisa manipular o DOM com base nas larguras ou alturas dos membros de uma lista renderizada (que eu acho que é o motivo mais provável de alguém fazer essa pergunta), mas não é tão genérica como as outras soluções propostas.

Uma solução para esse problema com um ngRepeat filtrado poderia estar com o Mutation eventos de , mas eles foram preteridos (sem substituição imediata).

Então pensei em outro fácil:

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

Isso se conecta aos métodos Node.prototype do elemento pai com um timeout $ timeout para observar as modificações sucessivas.

Funciona principalmente correto, mas recebi alguns casos em que o altDone seria chamado duas vezes.

Novamente ... adicione esta diretiva ao pai do ngRepeat.

Muito fácil, foi assim que eu fiz.

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

Por favor, dê uma olhada no violino, http://jsfiddle.net/yNXS2/ . Como a diretiva que você criou não criou um novo escopo, continuei no caminho.

$scope.test = function(){... fez isso acontecer.

Estou muito surpreso por não encontrar a solução mais simples entre as respostas a esta pergunta. O que você deseja fazer é adicionar uma ngInitdiretiva ao seu elemento repetido (o elemento com a ngRepeatdiretiva) verificando $last(uma variável especial definida no escopo pela ngRepeatqual indica que o elemento repetido é o último da lista). Se $lastfor verdade, renderizamos o último elemento e podemos chamar a função que queremos.

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

O código completo para sua marcação HTML seria:

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

Você não precisa de nenhum código JS extra em seu aplicativo além da função de escopo que deseja chamar (neste caso test) , pois ngInité fornecida pelo Angular.js. Apenas certifique-se de ter sua testfunção no escopo para que possa ser acessada a partir do modelo:

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