I would like to call a function after AngularJS renders the contents in the template, just as it removes display:none when using ng-cloak .
function executaAposRenderizar(){...}
app.controller('lista', ['$scope', function($scope) {
$scope.itens = [...]
// executaAposRenderizar();
}])
How to call a function after AngularJS has printed the content in the template?
I was able to resolve it as follows:
app.directive('executarAposRenderizar', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
scope.$evalAsync(attr.executarAposRenderizar);
}
}
}
});
app.controller('lista', ['$scope', function($scope) {
$scope.itens = [...]
$scope.alerta = function(){console.log('sucesso');};
}])
HTML:
<ul ng-app="app" ng-controller="lista">
<li ng-repeat="item in itens" executar-apos-renderizar="alerta()">{{item}}</li>
</ul>
After executing the last item in the loop it is called alerta() of $scope through executar-apos-renderizar .
References:
Try to use timeout$ to place the function in the list of browser events.
function executaAposRenderizar(){...}
app.controller('lista', ['$scope','$timeout', function($scope,$timeout) {
$scope.itens = [...]
$timeout(executaAposRenderizar, 0);
}])