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?

What's the C# for?

gcampbell
– gcampbell

2016-07-26 13:24:42 +00:00
Commented Jul 26, 2016 at 13:24 — gcampbell
– gcampbell, Commented Jul 26, 2016 at 13:24
Possible duplicate of Toggle classes in a list with Angular

Deblaton Jean-Philippe
– Deblaton Jean-Philippe

2016-07-26 13:35:24 +00:00
Commented Jul 26, 2016 at 13:35 — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented Jul 26, 2016 at 13:35
add callback to exec JQuery

kollein
– kollein

2016-07-26 13:37:24 +00:00
Commented Jul 26, 2016 at 13:37 — kollein
– kollein, Commented Jul 26, 2016 at 13:37

Community · Accepted Answer · 2017-05-23 11:51:28Z

2

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

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 26, 2016 at 13:38

Douglas Fernandes

1995 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Execute Javascript after Angular DOM Manipulation

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related