Question

我正在使用Angularjs 1.5.3我有2个服务，一个服务调用区域名称，另一个调用区域的详细信息。所以在我的代码中，我调用第一个服务来获取Area，然后我设置ng-init来调用详细信息。这样可以正常工作，但是角度只保留所有行的第一个值。

这是代码;

 <tbody data-ng-repeat="area in vm.Areas" ng-init='vm.getDetails(area)'>
    <tr>
       <td class="text-bold">{{area}}</td>
       <td>{{vm.AreaDetails.Employees}}</td>
       <td>{{vm.AreaDetails.Hours}}</td>
       <td>{{vm.AreaDetails.Sales}}</td>
     </tr>
 </tbody>

有关修复此问题的任何想法？感谢

Answer 1

您可以让控制器遍历区域并为每个区域调用getDetails，并在到达时将详细信息附加到相应区域。

绑定将伴随：

<tbody data-ng-repeat="area in vm.Areas">
 <tr>
   <td class="text-bold">{{area}}</td>
   <td>{{area.details.Employees}}</td>
   <td>{{area.details.Hours}}</td>
   <td>{{area.details.Sales}}</td>
 </tr>
</tbody>

数据到达时，绑定将会更新。

或者您可以使用具有隔离范围的指令，如下所示：

angular.module('yourModule').directive('areaInfo', function() {
  return {
    scope: {
      area: '=areaInfo'
    },
    require: "yourController", // conroller where getDetails is defined
    templateUrl: "area-info.html",
    link: function(scope, element, attrs, ctrl) {
      scope.areaDetails = ctrl.getDetails(scope.area);
    }
  }
});

<script type="text/ng-template" id="area-info.html">
  <tr>
    <td class="text-bold">{{area}}</td>
    <td>{{areaDetails.Employees}}</td>
    <td>{{areaDetails.Hours}}</td>
    <td>{{areaDetails.Sales}}</td>
  </tr>
</script>
<tbody data-ng-repeat="area in vm.Areas" area-info="area"></tbody>

您甚至可以将getDetails方法移动到指令本身。

Answer 2

你应该避免使用ng-init。滥用ng-init会大大降低您的表现。请参阅：ngInit。在开始渲染之前尝试获取您的详细信息，例如（pseydo）：

vm.areas = vm.areas.map(function(area) {
  return area.details = service.getDetails(area);
}

Answer 3

@TJ答案在技术部分是正确的，但我认为您的代码中存在设计问题。

如果您想加载区域及其详细信息，您应该一次性加载所有这些区域。相反，你会在那里一个一个地加载它们。

所以，假设您有10个区域，并且您是详细服务加载数据来自（我猜）服务器：发出11个请求：1表示所有区域，10表示每个区域的详细信息。

所以只需在一次调用中加载所有内容（可能是服务器）并执行简单的ng-repeat。

如何阻止AngularJS在行中绑定

3 个答案: