2013-11-23 57 views
0

我有一个指向链接到jquery ticker插件调用。在指令里面我有一些重复的插件循环。元素中的数据本身包含来自ajax请求。Angularjs指令ng-repeat和ajax

下面是代码

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); 
    } 
}; 
}]); 

这里是元素

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

问题是,当指令呈现时,NG-重复处理不当完成渲染。 $ timeout没有帮助,因为内容来自控制器中的ajax调用。

任何帮助?我希望指令等待渲染,直到控制器获取数据并且ng-repeat在dom中呈现内容为止。

谢谢。

回答

1

假设项目被添加到news数组中。你需要做的是观看news阵列,看看它什么时候被填满,然后应用你的股票代码。 您当前的指令定义不创建一个新的范围,所以,news阵列将访问,以便哟,如果你重新分配您的news阵列这款手表将火可以这样做

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); 
     } 
     } 
    } 
} 

现在。您也可以使用隔离范围传递news阵列。

+0

哇!多谢兄弟。这工作像魔术。 – Jenos