AngularJS: $ scope. $ Watch не обновляет значение, извлеченное из $ resource в пользовательской директиве
У меня проблема с пользовательскими директивами, которая сводит меня с ума. Я пытаюсь создать следующую пользовательскую (атрибутную) директиву:
angular.module('componentes', [])
.directive("seatMap", function (){
return {
restrict: 'A',
link: function(scope, element, attrs, controller){
function updateSeatInfo(scope, element){
var txt = "";
for (var i in scope.seats)
txt = txt + scope.seats[i].id + " ";
$(element).text("seat ids: "+txt);
}
/*
// This is working, but it's kind of dirty...
$timeout(function(){updateSeatInfo(scope,element);}, 1000);
*/
scope.$watch('seats', function(newval, oldval){
console.log(newval, oldval);
updateSeatInfo(scope,element);
});
}
}
});
Этот & quot; атрибут-тип & quot; директива (называемая seatMap) пытается показать список идентификаторов мест (например, для театра), которые я получу с сервера через службу $ resource (см. код ниже) в div (элемент).
Я использую его с этим простым частичным html:
<div>
<!-- This is actually working -->
<ul>
<li ng-repeat="seat in seats">{{seat.id}}</li>
</ul>
<!-- This is not... -->
<div style="border: 1px dotted black" seat-map></div>
</div>
И это контроллер, который загружает область:
function SeatsCtrl($scope, Seats) {
$scope.sessionId = "12345";
$scope.zoneId = "A";
$scope.seats = Seats.query({sessionId: $scope.sessionId, zoneId: $scope.zoneId});
$scope.max_seats = 4;
}
Где & quot; Сиденья & quot; простой сервис, использующий $ resources для получения JSON с сервера
angular.module('myApp.services', ['ngResource'])
.factory('Seats', function($resource){
return $resource('json/seats-:sessionId-:zoneId.json', {}, {});
})
;
app.js (asientos_libres.html - это часть, которую я использовал):
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'componentes']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/asientos_libres.html', controller: SeatsCtrl});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Проблема заключается в том, что, хотя я настроил & quot; scope. $ Watch & quot; в функции ссылки директивы, чтобы область видимости могла проверить «места» Атрибут был изменен для обновления списка идентификаторов, он не работает в момент изменения $ scope.seats в контроллере (когда мы вызываем «query»).
Как вы можете видеть в коде, я попытался с помощью $ timeout отложить запуск updateSeatInfo, но, боюсь, это далеко не самое умное решение на сегодняшний день ...
Я также пытался не делать JSON-запрос, но использовал жестко запрограммированный словарь в $ scope.seats, и он работает, так что, похоже, это вопрос синхронности.
Note: The updateSeatInfo is just a test function, the actual function I'll use is a bit more complex.
Есть идеи о том, как с этим справиться?
Спасибо большое заранее!
Edit 1: Добавлен app.js, где я использую маршрутизатор для вызова SeatsCtrl, спасибо Supr за совет. Однако у меня все еще есть та же проблема.
Edit 2: Solved!(?) Хорошо! Кажется, я нашел решение, которое может быть не самым лучшим, но оно работает правильно! :) Насколько я мог видеть здесьhttp://docs.angularjs.org/api/ng.$timeoutмы можем использовать $ timeout (обертку над setTimeout)with no delay! Это замечательно, потому что мы не искусственно задерживаем выполнение нашего кода внутри $ timeout, но мы делаем директиву не запускать его, пока не завершится асинхронный запрос.
Надеюсь, это сработает и для запросов на долгое ожидание
Если кто-то знает лучший способ исправить это, пожалуйста, сообщите!