Я пишу приложение AngularJS, в котором один массив (список активных заказов на работу) используется во многих разных контроллерах. Этот массив обновляется периодически, используя вызов $http
на сервер. Чтобы поделиться этой информацией, я поместил массив в службу.
Массив службы запускается пустым (или для целей отладки с фиктивными значениями ["A", "B", "C"]
), а затем запрашивает сервер для инициализации списка. К сожалению, все мои контроллеры, похоже, связаны с предварительно запрошенной версией массива - в моем приложении все, что я вижу, - это фиктивные значения, которые я инициализировал массивом с помощью.
Моя цель - связать массив с моими контроллерами таким образом, чтобы Angular понял, что массив обновлен и заставляет мое представление повторно отображать, когда массив изменяется без моего представления $watch
или заставить мой вызов $http
ждать результатов.
Вопрос: Как связать массив wo_list с моей службой с моим контроллером, чтобы Angular рассматривал его как обычную наблюдаемую часть модели?
У меня есть:
-
Служба, содержащая массив и функцию обновления, используемые для инициализации и периодического обновления массива с сервера (я знаю, что это работает с сообщением
console.log()
). Для целей отладки я инициализирую массив с помощью заполнителей "A", "B" и "C" - настоящие порядки работы представляют собой пятизначные строки.angular.module('activeplant', []). service('workOrderService', function($http) { wo_list = ["A", "B", "C"]; //Dummy data, but this is what 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(); } } })
-
Контроллер, который должен привязываться к массиву в 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() }
-
Шаблон представления, который выполняет итерацию над связанным массивом в контроллере завода, чтобы распечатать список рабочих заказов. Я делаю две попытки заставить это работать, окончательная версия будет иметь только элемент 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>
-
Несколько других пар представлений/контроллеров, не указанных здесь, которые также связывают и перебирают по массиву рабочих заказов.