Execute Javascript after Angular DOM Manipulation

Question

I got pagination in angular done in $http.get like that:

if (vm.currentPage <= 6) {
      vm.pagination = _.range(1, 11);
}
if (vm.currentPage > 6) {
    vm.pagination = _.range(vm.currentPage - 5, vm.currentPage + 5);
}
if (vm.currentPage > vm.maxPage - 5) {
      vm.pagination = _.range(vm.maxPage - 10, vm.maxPage + 1)
}

<li ng-repeat='val in vm.pagination' class="page">
   <a href="{{val}}" value="{{val}}">{{val}}</a>
</li>

I also got jquery function that i want to be execute after vm.pagination is updated on index.html:

$("a[value=" + vm.currentPage + "]").parent().addClass("active");

At this point i'm waiting to $http.get is finished, and execut jquery function after it, but still Angular add new li elements after everything is executed in controller.

How to make jquery function executed after Angular finish updated vm.pagination in view?

Possible duplicate of [Toggle classes in a list with Angular](http://stackoverflow.com/questions/27823122/toggle-classes-in-a-list-with-angular) — Deblaton Jean-Philippe, Jul 26 '16 at 13:35

score 2 · Accepted Answer · edited May 23 '17 at 11:51

You can create a custom directive

<li ng-repeat='val in vm.pagination' id="page" my-repeat-directive>
  <a href="{{val}}" value="{{val}}">{{val}}</a>
</li>

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!"); // Execute you code here
    }
  };
})

You can get more information (and an example) in the Source Answer

Execute Javascript after Angular DOM Manipulation

1 Answers1