Angularjs: run jquery after load in ng-repeat

Question

Hi How to run jquery scripts when I load data in ng-repeat. jquery works good when I have a static dom element, but when I use ng-repeat scripts not working I need to use dynamically height of div, and bootstrap tooltip. I have this code:

$(document).ready(function () {
    //myMovies
        //$('.templates_movies').height($('.templates').outerHeight());
    $(document).on("load", ".templates_movies", function() {
        $('[data-toggle="tooltip"]').tooltip();
    });


});

But it's not working. Please help me.

you have to create a directive for that

Raulucco
– Raulucco

2016-12-16 12:57:26 +00:00
Commented Dec 16, 2016 at 12:57 — Raulucco
– Raulucco, Commented Dec 16, 2016 at 12:57

kamlesh · Accepted Answer · 2016-12-16 13:50:50Z

1

you can create directive

app.directive("tooltip",function(){
  return{
    link: function(scope,ele,attr){
      $('[data-toggle="tooltip"]').tooltip(); 
    }
  }
});

and then use "tooltip" with your ng-repeat like

<div ng-repeat ="item in [1,2,3]" tooltip>
   <span data-toggle="tooltip"  class="test" title="Hiiii" ng-bind="item"></span>
</div>

edited Dec 16, 2016 at 13:50

answered Dec 16, 2016 at 13:13

kamlesh

2381 silver badge5 bronze badges

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

3 Comments

Kaker Over a year ago

i include: <script src="js/jquery-3.1.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>

Kaker Over a year ago

i do that i have first app.controller(...).directive()

kamlesh Over a year ago

Try my new updated code under directive link function "$('[data-toggle="tooltip"]').tooltip(); ". I think it will work.

Raulucco · Accepted Answer · 2016-12-16 12:59:23Z

0

An example of the link function of the directive would be:

function link (scope, element) {
  $(element[0].querySelectorAll('[data-toggle="tooltip"]')).tooltip();
}

answered Dec 16, 2016 at 12:59

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angularjs: run jquery after load in ng-repeat

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related