AngularJS - 工厂变量不在控制器中更新
AngularJS - Factory variable doesn't update in controller
我遇到了 AngularJS 的新问题。
事实上,因为我需要有一个 "shared" 变量,在 2 个控制器中可读和可更新,我考虑过在两个控制器中注入一个工厂来做到这一点。数据是通过 http 请求加载的,但是一旦请求完成,var 就不会更新。这是我的代码:
//Common factory
app.factory('CurrentGallery',['$q','$http',function($q,$http){
var data = null;
//HTTP request to API
var loadImages = function(query){
$http.post("https://mywebsite.com/api/?"+query).then(function(result){
update(result.data);
});
}
//Update the data var
var update = function(data){
data = data;
console.log("Update called", data);
}
return {
loadImages: loadImages,
update: update,
data: data
}
}]);
//The controller
app.controller("PhotoBestController", ['$scope', 'CurrentGallery', function ($scope,CurrentGallery) {
//$scope.pics is basically the variable I want to update inside my controller
$scope.pics = CurrentGallery.data;
//Send the data of the query for the API
CurrentGallery.loadImages("userInfo=true&exifInfo=true&order=tot_like,DESC");
$scope.$watch(CurrentGallery, function(){
console.log("CurrentGallery has changed");
});
}]);
这是我在控制台中获得的日志:
- 当前画廊已更改
- 已调用更新,对象{...}
所以 CurrentGallery 似乎是第一次更新,当它为空时,但是之后,即使它在工厂内部更新,它也不会更新 $scope.pics var.
有什么建议吗?
更新
我遵循了这个线程中的代码逻辑:AngularJS : How to watch service variables?
app.factory('CurrentGallery',['$q','$http',function($q,$http) {
var updateCallbacks = [];
var data = null;
var loadImages = function(query) {
$http.post("https://mywebsite.com/api/?"+query).then(function(result) {
angular.forEach(updateCallbacks, function(callback) {
callback(result.data);
});
});
}
var registerUpdateCallback(callback) {
updateCallbacks.push(callback);
}
return {
loadImages: loadImages,
registerUpdateCallback: registerUpdateCallback
}
}]);
app.controller("PhotoBestController", ['$scope', 'CurrentGallery', function($scope,CurrentGallery) {
CurrentGallery.registerUpdateCallback(function(data) {
console.log("updated")
});
CurrentGallery.loadImages("userInfo=true&exifInfo=true&order=tot_like,DESC");
}]);
我认为你的数据只在工厂更新。因此,要在控制器中更新它,您必须从工厂重新获取它。
所以你把 watch 放在你的控制器中的地方 re-assign 作用域变量:
$scope.$watch(CurrentGallery, function(){
$scope.pics = CurrentGallery.data;
console.log("CurrentGallery has changed");
});
我遇到了 AngularJS 的新问题。 事实上,因为我需要有一个 "shared" 变量,在 2 个控制器中可读和可更新,我考虑过在两个控制器中注入一个工厂来做到这一点。数据是通过 http 请求加载的,但是一旦请求完成,var 就不会更新。这是我的代码:
//Common factory
app.factory('CurrentGallery',['$q','$http',function($q,$http){
var data = null;
//HTTP request to API
var loadImages = function(query){
$http.post("https://mywebsite.com/api/?"+query).then(function(result){
update(result.data);
});
}
//Update the data var
var update = function(data){
data = data;
console.log("Update called", data);
}
return {
loadImages: loadImages,
update: update,
data: data
}
}]);
//The controller
app.controller("PhotoBestController", ['$scope', 'CurrentGallery', function ($scope,CurrentGallery) {
//$scope.pics is basically the variable I want to update inside my controller
$scope.pics = CurrentGallery.data;
//Send the data of the query for the API
CurrentGallery.loadImages("userInfo=true&exifInfo=true&order=tot_like,DESC");
$scope.$watch(CurrentGallery, function(){
console.log("CurrentGallery has changed");
});
}]);
这是我在控制台中获得的日志:
- 当前画廊已更改
- 已调用更新,对象{...}
所以 CurrentGallery 似乎是第一次更新,当它为空时,但是之后,即使它在工厂内部更新,它也不会更新 $scope.pics var.
有什么建议吗?
更新
我遵循了这个线程中的代码逻辑:AngularJS : How to watch service variables?
app.factory('CurrentGallery',['$q','$http',function($q,$http) {
var updateCallbacks = [];
var data = null;
var loadImages = function(query) {
$http.post("https://mywebsite.com/api/?"+query).then(function(result) {
angular.forEach(updateCallbacks, function(callback) {
callback(result.data);
});
});
}
var registerUpdateCallback(callback) {
updateCallbacks.push(callback);
}
return {
loadImages: loadImages,
registerUpdateCallback: registerUpdateCallback
}
}]);
app.controller("PhotoBestController", ['$scope', 'CurrentGallery', function($scope,CurrentGallery) {
CurrentGallery.registerUpdateCallback(function(data) {
console.log("updated")
});
CurrentGallery.loadImages("userInfo=true&exifInfo=true&order=tot_like,DESC");
}]);
我认为你的数据只在工厂更新。因此,要在控制器中更新它,您必须从工厂重新获取它。
所以你把 watch 放在你的控制器中的地方 re-assign 作用域变量:
$scope.$watch(CurrentGallery, function(){
$scope.pics = CurrentGallery.data;
console.log("CurrentGallery has changed");
});