[英]angularjs .service doesn't work to pass variables between controllers
I've created a service to pass a boolean flag between controllers. 我创建了一个在控制器之间传递布尔标志的服务。 Service looks like this :
服务看起来像这样:
angular.module('MyApp')
.service('sharedProperties', function () {
var flag = false;
return {
getProperty: function () {
return flag;
},
setProperty: function(value) {
flag = value;
}
};
});
First controller where flag is set is this 设置标记的第一个控制器是这个
angular.module('MyApp')
.controller('test1', function($scope, $location, $http, $window, sharedProperties) {
$scope.flag1 = function () {
if ($location.path() == '/') {
sharedProperties.setProperty(false);
return false;
}else {
sharedProperties.setProperty(true);
return true;
};
};
});
And controller receiving argument is this 控制器接收参数是这个
angular.module('MyApp')
.controller('test2', function($scope, $location, $http, $window, sharedProperties) {
$scope.flag2 = sharedProperties.getProperty();
});
flag1 in test1 takes a correct value, but test2 is always false. test1中的flag1取正确值,但test2始终为false。 If I initialize flag at service as true - it's always true at test2.
如果我在服务时将标志初始化为true-在test2处始终为true。 If I don't initialize it - it's undefined at test2.
如果我不初始化它-它在test2中是未定义的。
This behaviour is totally expected and is not linked to angularjs in particular, it works like this in vanilla javascript. 这种行为是完全可以预期的,并且不特别链接到angularjs,它在香草javascript中的工作原理是这样的。 The issue you encounter is due to the fact that javascript primitives are passed by value and not by reference.
您遇到的问题是由于JavaScript原语是通过值而不是通过引用传递的。 You can read more about it here: Is JavaScript a pass-by-reference or pass-by-value language?
您可以在此处了解更多信息: JavaScript是引用传递还是值传递语言?
How to fix your code? 如何修复您的代码? Use an object which will be passed by reference.
使用将通过引用传递的对象。
Could you try this: 您可以尝试一下:
angular.module('MyApp')
.service('sharedProperties', function () {
var flag = {
value: false
};
return {
getProperty: function () {
return flag;
},
setProperty: function(value) {
flag.value = value;
}
};
});
angular.module('MyApp')
.controller('test1', function($scope, $location, $http, $window, sharedProperties) {
$scope.flag1 = function () {
if ($location.path() == '/') {
sharedProperties.setProperty(false);
return false;
}else {
sharedProperties.setProperty(true);
return true;
};
};
});
angular.module('MyApp')
.controller('test2', function($scope, $location, $http, $window, sharedProperties) {
$scope.flag2 = sharedProperties.getProperty();
// use flag2.value in your markup
});
The reason being is I believe that Angular initializes a service with new
when added to a controller. 原因是我相信Angular在添加到控制器时会使用
new
初始化服务。
So when manipulating in test1, its an instance of the service in that controller which is not shared in the other controller. 因此,在test1中进行操作时,它是该控制器中服务的一个实例,该实例在其他控制器中未共享。 I could be wrong though and would recommend firstly using
this.flag
instead of var flag
. 我可能是错的,并且建议首先使用
this.flag
而不是var flag
。 In addition, your test2 controller makes a call on angular load, rendering false
but it doesn't watch for changes. 此外,您的test2控制器会调用角负载,将其呈现为
false
但它不会监视更改。
Created a JSBIN to solve it for you: http://jsbin.com/xoqup/1/edit 创建了一个JSBIN为您解决它: http ://jsbin.com/xoqup/1/edit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.