Question

我有以下HTML代码：

<div class="row">
    <div class="col-md-8">
        <div class="panel panel-default">
            <div class="panel-heading" style="height: 56px;"><strong style="font-size: 20px;"><i class="fa fa-bar-chart"></i>Plan For {{entityYear}}</strong>
                <div class="input-group year date col-md-3" style="float: right;">
                    <input type="text" class="form-control" ng-model="entityYear" ng-change="getPlansDataByYear(entityYear)">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                </div>
            </div>
            <table id="myTable" class="table table-striped">
                <tr>
                    <th class="col-md-1">Name</th>
                    <th class="col-md-2">Description</th>
                    <th class="col-md-2">Start Date</th>
                    <th class="col-md-2">End Date</th>
                    <th class="col-md-2">Date Added</th>
                    <th class="col-md-4">Chart</th>
                </tr>
                <tr id="planRows" ng-repeat="plan in plansOfTheYear">
                    <td>
                        {{plan.name}}
                    </td>
                    <td>
                        {{plan.description}}
                    </td>
                    <td>
                        {{plan.startDate | date: 'dd MMMM yyyy'}}
                    </td>
                    <td>
                        {{plan.endDate | date: 'dd MMMM yyyy'}}
                    </td>
                    <td>
                        {{plan.dateAdded | date: 'dd MMMM yyyy'}}
                    </td>
                    <td>
                        <div id="doughnutChart{{$index}}" class="panel-body"></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

控制器代码如下：

$scope.getPlansDataByYear = function(year){
        PlansService.getPlansDataByYear(year).success(function(data){
            $scope.plansOfTheYear = data;
            _.each(data, function(planData, index){
                $('#doughnutChart' + index).append('<div>Chart here</div>')
            });
        })
    }

我想要的是找到doughnutChart div并附加<div>Chart here</div>。问题是，因为我使用ajax调用，它将运行ng-repeat以及jQuery行，因此它找不到例如第一个div doughnutChart0，因为它在我尝试时不存在用我的jQuery行找到它。

所以我的问题是如何首先加载ng-repeat数据，然后搜索我想要追加数据的特定div？非常感谢所有帮助。

我从stackoverflow和angularjs文档中搜索了解决方案，但找不到任何。

当我运行代码时，它找不到该名称的任何元素。但是我可以找到第一行，因为它已经存在。

Answer 1

如果需要在ng-repeat完成后调用jQuery代码，只需利用JavaScript的单线程事件循环并在超时后运行jQuery代码：

$scope.getPlansDataByYear = function(year){
  PlansService.getPlansDataByYear(year).success(function(data){
    $scope.plansOfTheYear = data;
    //you can use window.setTimeout instead of $timeout since angular doesn't need to be aware of the code run by jQuery
    window.setTimeout(function() {
     _.each(data, function(planData, index){
       $('#doughnutChart' + index).append('<div>Chart here</div>');
     });
   }, 1);

  });
};

或者，如果你想这样做，那就是＆＃34;角度方式＆＃34;我建议你在你看来改变这个：

<td>
    <div class="panel-body" ng-bind-html="plan.chart"></div>
</td>

在你的控制器中：

$scope.getPlansDataByYear = function(year){
  PlansService.getPlansDataByYear(year).success(function(data){
    $scope.plansOfTheYear = data;        
    $scope.plansOfTheYear.forEach(function(plan) {
      plan.chart = '<div>Chart here</div>';
    });
  });
};

请注意，为此，您需要添加ngSanitize。

Answer 2

我强烈建议不要通过这种方式添加元素，而应该尝试directive，angular会同时渲染指令，所以你不必担心通过for-loop追加它：

directive('chartattr', function() {
  return {
    restrict: 'A',
    template: 'Chart here'
  };
});

<td>
<div id="doughnutChart{{$index}}" class="panel-body"></div>
<div chartattr></div>
</td>

AngularJS Directive Doc

加载ng-repeat后查找表的特定元素

2 个答案: