11

我正在编写一个 AngularJS 应用程序，其中一个数组（活动工作订单列表）用于许多不同的控制器。$http使用对服务器的调用定期刷新此数组。为了分享这些信息，我将数组放在了服务中。

服务中的数组一开始是空的（或者，出于调试目的，使用 dummy values ["A", "B", "C"]），然后查询服务器以初始化列表。不幸的是，我所有的控制器似乎都绑定到数组的预查询版本——在我的应用程序中，我看到的只是我初始化数组的虚拟值。

我的目标是以这样的方式将数组绑定到我的控制器中，这样 Angular 会意识到数组已更新，并导致我的视​​图在数组更改时重新呈现，而无需引入 a$watch或强制我的$http调用等待结果.

问题：如何将 wo_list 数组从我的服务绑定到我的控制器，以便 Angular 将其视为模型的常规可观察部分？

我有：

  1. 包含数组的服务和用于从服务器初始化和定期更新数组的刷新函数（我知道这是通过console.log()消息工作的）。出于调试目的，我使用占位符“A”、“B”和“C”来初始化数组——真正的工作指令是五位数的字符串。

    angular.module('activeplant', []).
   service('workOrderService', function($http) {

   wo_list = ["A", "B", "C"]; //Dummy data, but this is what's bound in the controllers.

   refreshList = function() {
         $http.get('work_orders').success(function(data) {
             wo_list = data;
             console.log(wo_list) // shows wo_list correctly populated.
         })
   }

   refreshList();

   return {

       wonums: wo_list,  // I want to return an observable array here.

       refresh:  function() {
         refreshList();
       }

   }
 })

  2. 一个控制器，它应该绑定到 workOrderService 中的数组，以便我可以显示工作订单列表。我在两种不同的尝试中绑定了服务和服务返回的数组，以使其正常工作。

    function PlantCtrl($scope, $http, workOrderService) {
  $scope.depts      = []
  $scope.lastUpdate = null
  $scope.workorders = workOrderService
  $scope.wonums     = workOrderService.wonums  // I want this to be observable

  $scope.refresh = function() {
      $scope.workorders.refresh()
      $http.get('plant_status').success(function(data) {
          $scope.depts = data;
          $scope.lastUpdate = new Date()
      }); 
  }

  $scope.refresh()

}

  3. 一个视图模板，它遍历工厂控制器中的绑定数组以打印工作订单列表。我做了两次尝试让它工作，最终版本只有一次 ul 元素。

    <div ng-controller="PlantCtrl">
  <div style='float:left;background-color:red' width="20%">
      <h2>Work Orders</h2>
      <ul>
         <li ng-repeat="wonum in workorders.wonums"><a href=""> {{wonum}} </a></li>
      </ul>
      <ul>
          <li ng-repeat="wonum in wonums"><a href=""> {{wonum}} </a></li>
      </ul>
  </div>
</div>

  4. 其他几个视图/控制器对（此处未显示）也绑定和迭代工作订单数组。

4

2 回答 2

16

看看这是否解决了你的问题：

而不是wo_list = data，填充相同的数组。当您将一个新data数组分配给 wo_list 时，您将失去与旧数组的绑定——即，您的控制器可能仍绑定到前一个data数组。

wo_list.length = 0
for(var i = 0; i < data.length; i++){
    wo_list.push(data[i]);
}

有关更多信息，请参阅https://stackoverflow.com/a/12287364/215945。

更新： 可以/应该使用angular.copy()代替：

angular.copy(data, wo_list);

当向 copy() 方法提供目标时，它将首先删除目标的元素，然后从源中复制新的元素。

于 2013-01-15T16:53:48.717 回答
2

您可以将所有控制器使用的数组放在父控制器中。由于作用域继承自更高作用域，这意味着所有控制器都具有相同的数组副本。由于数组是更高范围的模型，因此无论何时使用，更改它都会更新视图。

例子：

<div ng-controller="MainControllerWithYourArray">
    <div ng-controller="PlantCtrl">
         Wonums length: {{wonums.length}}
    </div>
    <div ng-controller="SecondCtrl">
         Wonums length in other controller: {{wonums.length}}
    </div>
</div>

您只需要在 MainController 中定义 wonums 数组：

function MainControllerWithYourArray($scope, workOrderService){
    $scope.wonums = workOrderService.wonums;
}

希望这对你有用！

于 2013-01-15T16:43:17.147 回答