Jquery plugin not working inside AngularJS ng-repeat

Question

I'm trying to use a Jquery plugin (Star Rating plugin - link) inside AngularJS's ng-repeat directive but I dont know why its not working. If I try out outside Angular's scope then its doing its job flawlessly.

<div ng-controller="MyController">
    <div ng-repeat="datum in data">
        <span>Name : {{datum.name}}</span><br/>
        <span>Age : {{datum.age}}</span><br/>
        <input id="rater" class="rating" value={{datum.rate}} min=0 max=5 step=1><!--Third party rating plugin-->
    </div>
</div>

The html input which get parsed as a Star rating with value fetched from backend via ajax request. I guess the culprit seems to be the timing, Jquery completes its task before Angular does, so is there any other way to accomplish this one? Thanks in Advance.

Create a directive for this jquery plugin (or search if it exists already) — V31, Sep 20 '14 at 19:06
There should be a different id for each input tag the ng-repeat creates. You could create an extra directive for the StarRating plugin. In the directive you can directly access the JQuery element withour usind an id. http://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angular-js — sonic23, Sep 20 '14 at 19:06

score 0 · Answer 1 · answered Sep 20 '14 at 20:15

0

You can use http://angular-ui.github.io/bootstrap and look for rating directive, Its an AngularJS <rating> directive.

Angular Tip: Always search for angular js directive before falling back to jQuery plugins

answered Sep 20 '14 at 20:15

Siraj

687
4
7

Thanks Siraj - I've used directive. Problem Solved! – Renish B Sep 22 '14 at 14:55

score 0 · Accepted Answer · answered Sep 22 '14 at 15:16

I created a custom directive and linked my attributes. Now it works awesome. Please find the code snippet below.

My directive:

renapp.directive('srater',function(){
 return {
 restrict : 'AE',
 link : function(scope, elem, attr){
   $(elem).rating('update', attr.value);
  }
 } 
});

Html :

<srater value={{datum.rate}} data-show-clear="false" readonly="true"></srater>

Thanks Guys for the support.

Yatin Khullar · Answer 3 · 2017-06-19T07:37:16.230

Easiest way for this might be using jquery setimeout() function after window load.

It might not be good approach but it is easient one for me and works fine.

Code look something like this:

jQuery(window).load(function() {        
    setTimeout(function(){
        jQuery("#rater").rating();
    }, 10); /****10 is dealy in milliseconds**/
});

And If you are using http service then you can also use angularjs $timeout Service

Something like that

   $scope.show_ratings = function(id) {
        $http({
            method : "GET",
            url : SITE_URL+"angular_http/fetch_ratings.php",
            params: {subcateid: id}
        }).then(function mySucces(response) {
            $scope.fetch_ratings = response.data.records;
        }, function myError(response) {
            $scope.myerror = response.statusText;
        });
        $timeout(function () {
            jQuery("#rater").rating();
        }, 500);
    },

I hope it will work well for all.

Jquery plugin not working inside AngularJS ng-repeat

3 Answers3