Question

我有一个使用ng-repeat

的缩略图页面

<ul class="list-inline">
  <li ng-controller="IndicCtrl" ng-repeat="indic in indics" class="col-md-6 thumbnail">
    <linechart data="data" options="options" height="400"></linechart    >
  </li>
</ul>

我希望每个缩略图都显示一个包含自己数据的图表，我有这个工厂和2个控制器。如何获取发送到show中的函数的indic.id的值：这样它会将相应的数据返回给每个缩略图？

module.factory('Indic', [
 'Restangular', '$http'
 (Restangular, $http)->
   list: () -> Restangular.all('indics').getList()
   show: (indicId) -> Restangular.one('indics', indicId).get().then (chartData) ->
     $http.get(chartData.url, params: { 'api_key': chartData.api_key, 'series_id': chartData.series_id, 'num': chartData.num }).then (result) ->
       values = _.unzip result.data.series[0].data.reverse()
       dates = values[0]

       modDates = _.map dates, (x) ->
         new Date(x.replace(/(\d{4})(\d+)/, '$1-$2'))

       valueArray = values[1]

       data = []
       i = 0
       while i < dates.length
         data.push
           x: modDates[i]
           value: valueArray[i]
         i++
       return data
 ])

module.controller('IndicsCtrl', [
  '$scope', 'Indic'
  ($scope, Indic)->
    Indic.list().then((indics) ->
      $scope.indics = indics
      console.dir indics
  )
])

module.controller('IndicCtrl', [
  '$scope', 'Indic'
  ($scope, Indic)->
    Indic.show().then((data) ->
    $scope.indicId = indic.id
    $scope.data = data
    console.dir data
  )

Answer 1

这应该重构为你自己的指令

app.directive('myLinechart,['Indic',function(Indic) {
   return {
     restrict : 'E',
     scope : {
       indic : '='
     },
     link : function(scope) {
       scope.data = Indic.show(scope.indic.id);
     },
     template : ' <linechart data="data" options="options" height="400"></linechart    >';
   }
}]);

然后你只需修改你的模板

<ul class="list-inline">
 <li ng-controller="IndicCtrl" ng-repeat="indic in indics" class="col-md-6 thumbnail">
  <my-linechart indic="indic"></my-linechart >
 </li>
</ul>

如何将ng-repeat的每次迭代的索引发送回工厂？

1 个答案: