Angularjs directive with ng-repeat and ajax

Question

I have a directive which links to a jquery ticker plugin call. Inside the directive i have some elements repeating for the plugin to cycle through. The data in the elements itself is containing from an ajax request.

Here is the code

myApp.directive('vTicker', ['$timeout', function($timeout) {

return {

    link: function($scope, iElm, iAttrs, controller) {
        $timeout(function () {
           // console.log($(iElm).html());
           $(iElm).vTicker($scope.$eval(iAttrs.vTicker));            
        }, 0);
    }
};
}]);

And here is the element

<div id="newsticker" v-ticker="{speed: 400,pause: 6000}">
      <ul class="list-unstyled">
             <li class="news-item" ng-repeat="newsItem in news">
                 <a href="http://www.nasdaqdubai.com/trading/disclosure-detail?itemID="{{newsItem.id}} target="_blank">{{newsItem.issuer}} : {{newsItem.headline}}</a>
              </li> 
       </ul>

The problem is when the directive renders, the ng-repeat hasnt completed rendering. $timeout is not helping either as the content is coming from an ajax call in the controller.

Any help? I want the directive to wait rendering until the controller get the data and ng-repeat render the content in the dom.

Thanks.

Dan Atkinson · Accepted Answer · 2014-03-06 14:48:14Z

1

Assuming that the items get added to news array. What you need to do is watch on the news array and see when it gets filled and then apply your ticker. Your current directive definition does not create a new scope so the news array would be accessible so yo can do something like

link: function($scope, iElm, iAttrs, controller) {
   $scope.$watch("news", function(newValue,oldValue) {
       if(newValue && newValue.length > 0) {
        $timeout(function () {
           // console.log($(iElm).html());
           $(iElm).vTicker($scope.$eval(iAttrs.vTicker));            
           }, 0);
        }
      }
  }
}

Now if you reassign your news array this watch would fire. You can pass the news array using isolated scope too.

edited Mar 6, 2014 at 14:48

Dan Atkinson

11.8k14 gold badges89 silver badges116 bronze badges

answered Nov 23, 2013 at 13:32

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

Collectives™ on Stack Overflow

Angularjs directive with ng-repeat and ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related