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.

Answer 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.