angularjs - 在 AngularJS 中的 Controller 之间共享可观察数组引用

Question

我正在编写一个 AngularJS 应用程序，其中一个数组(事件工作订单列表)用于许多不同的 Controller 。该数组通过对服务器的 $http 调用定期刷新。为了共享此信息，我已将数组放置在服务中。

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

我的目标是将数组绑定(bind)到我的 Controller 中，这样 Angular 就会意识到数组已更新，并在数组更改时导致我的视​​图重新渲染，而无需引入 $watch 或强制我的 $http 调用等待结果。

问题:如何将 wo_list 数组从我的服务绑定(bind)到我的 Controller ，以便 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. 应该绑定(bind)到 workOrderService 中的数组的 Controller ，以便我可以显示工作订单列表。我在两次不同的尝试中绑定(bind)了服务和服务返回的数组，以使其正常工作。

   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. 一个 View 模板，它迭代工厂 Controller 中的绑定(bind)数组以打印工单列表。我正在两次尝试让它发挥作用，最终版本只会有一次 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. 其他几个 View / Controller 对(此处未显示)也绑定(bind)并迭代工作订单数组。

Answer 1

看看这是否能解决您的问题:

填充同一个数组，而不是wo_list = data。当您将新的 data 数组分配给 wo_list 时，您将丢失与旧数组的绑定(bind) - 即，您的 Controller 可能仍绑定(bind)到之前的 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() 方法时，它将首先删除目标的元素，然后从源复制新元素。