AngularJS:尽管绑定到服务变量,控制器变量仍未更新
问题描述:
问题:控制器变量vm.boatList
(意图绑定到服务变量,SearchService.boatList
)未使用服务变量进行更新。AngularJS:尽管绑定到服务变量,控制器变量仍未更新
代码片段:完整代码在底部。
控制器
function SearchController($stateParams, SearchService) {
var vm = this;
vm.boatList = SearchService.boatList;
服务
function SearchService(BoatsDataService) {
var service = {
boatList: null,
getBoatList: getBoatList,
params: {}
};
return service;
附加数据:
的getBoatList
功能来自控制器称为工程 - 它从记录数据到控制台。当我之后立即登录vm.boatList
时,它为空。
另外,<div ng-repeat="boat in SearchController.boatList">...</div>
只适用于当我直接指定给vm.boatList
。
控制台输出:
Array[3]
null
完成控制器:
(function() {
'use strict';
angular.
module('trips').
controller('SearchController', SearchController);
SearchController.$inject = ['$stateParams', 'SearchService'];
function SearchController($stateParams, SearchService) {
var vm = this;
vm.boatList = SearchService.boatList;
vm.initialParams = getParams();
activate();
////////////////////
function activate() {
setInitialParams();
SearchService.getBoatList()
.then(function (data) {
SearchService.boatList = data;
console.log(SearchService.boatList); // Logs data.
console.log(vm.boatList); // Logs null.
})
.catch(function (error) {
console.log(error);
});
}
function getParams() {
var params = {
location: $stateParams.location,
passengers: $stateParams.passengers,
maxPrice: $stateParams.maxPrice,
minPrice: $stateParams.minPrice,
embark: $stateParams.embark,
disembark: $stateParams.disembark,
category: $stateParams.category
};
return params;
}
function setInitialParams() {
SearchService.params = getParams();
}
}
})();
完整的服务:
(function() {
'use strict';
angular.
module('trips').
factory('SearchService', SearchService);
SearchService.$inject = ['BoatsDataService'];
function SearchService(BoatsDataService) {
var service = {
boatList: null,
getBoatList: getBoatList,
params: {}
};
//$scope.$watch('service.params', function() {
// getBoatList().then(function (data {
// service.boatList = data;
// })
// }, true
//);
return service;
//////////////////////
function getBoatList() {
return BoatsDataService.BoatList
.query(service.params)
.$promise
}
}
})();
回顾:我猜不知如何双向绑定。
答
当您尝试绑定直接位于服务上的变量时,该变量将失败(请参阅call by sharing)。但是,如果您用对象包装它,它会像您期望的那样工作,请参阅this Fiddle。
所以你的情况,如果你绑定服务到控制器内的对象,它应该是罚款 -
服务:
var service = {
boatListObj : {
boatList: null
},
getBoatList: getBoatList,
params: {}
};
控制器:
vm.boatListObj = SearchService.boatListObj;
无极响应:
.then(function (data) {
SearchService.boatListObj.boatList = data;
console.log(SearchService.boatListObj.boatList); // Logs data.
console.log(vm.boatListObj.boatList); // Should log fine now
})
<div ng-repeat="boat in SearchController.boatList">...</div>
不能正常工作的原因是因为SearchController.boatList
不在$scope
上。它必须位于$ scope上,或者当它放置在控制器上时通过ControllerAs语法进行寻址。
This Works,thanks!我的后续工作是:**为什么'boatList = {}'没有工作,因为这会创建一个空对象?**实际上,当我使用该语法时,它会以对象的身份登录到控制台。基于某些阅读的理解是,只要绑定变量不是原始的,它就会设置自动$ watch。 –
这不起作用,因为当你在做'boatList = ...'时试图覆盖它,这意味着你正在尝试改变'boatList'的参考。请注意,在解决方案中,您正在修改对象内的变量,并且不会将包装器对象更改为指向其他对象。 –