如何从一个控制器设置一项服务的值，以及如何使用此服务更新另一控制器的值 [英] How to set value of one service from one controller, and update value of another controller with this service
问题描述
我是该领域的新手，想编写一个应用程序，现在遇到了一些问题.这是我的代码的简单版本，我想要的是API首先仅显示 signUp .在按 signUp 并按 submit 后，显示的按钮应该仅为 signout
I am new in this field and want to write a app, now I meet some problems. Here is a simple version of my code, what I want is the API only show signUp first. After I press signUp and press submit the button shown should be only signout
我认为我的方法并不正确，因为在更改服务中的值之后，另一个控制器无法更新其值.你能告诉我吗?请尽可能使用 this.logged ，谢谢！
I think my way is not all right, because after I change the value in service, another controller can't update its value. Could you tell me that?
please use this.logged if possible, thanks!
此过程不必与我的标题相同.如果可以实现我的功能，就可以了.
The process is not necessary to be same to my title. OK if it can implement my function.
https://plnkr.co/edit/1ptaVzmD7EwPZ6dU23gR?p=preview
(function(){
angular.module('myApp',['myApp.dashboard','myApp.value','myApp.signUp']);
})();
(function(){
angular.module('myApp.dashboard',[]);
})();
(function(){
angular.module('myApp.value',[]);
})();
(function(){
angular.module('myApp.signUp',[]);
})();
(function(){
'use strict';
angular.module('myApp.dashboard').controller('mainControl',mainControl);
mainControl.$inject = ['whichToShow'];
function mainControl(whichToShow){
this.logged=whichToShow.getVar();
alert(this.logged);
}
})();
(function(){
'use strict';
angular.module('myApp.value').factory('whichToShow',function(){
alert("running2");
var logged=false;
return {
getVar: function(){
return logged;
},
setVar: function(value){
logged=value;
}
};
});
})();
(function(){
'use strict';
angular.module('myApp.signUp').controller('signUpControl',signUpControl);
signUpControl.$inject = ['whichToShow'];
function signUpControl(whichToShow){
alert("haha");
this.logIn=function(){
whichToShow.setVar(true);
alert("running set!");
};
};
})();
部分html:
<body ng-controller="mainControl as mc">
<div>
<div ng-hide="mc.logged">
<button type="button" class="btn" data-toggle="modal" data-target=".signUp">Sign Up</button>
</div>
<div ng-show="mc.logged">
<button>Sign Out</button>
</div>
</div>
<div class="signUp modal fade" id="signUp" ng-controller='signUpControl as sc'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">sigh up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
</div>
<div class="modal-body">
<form id="signUpForm" name="signUpForm" ng-submit="sc.logIn()">
<label for="email">
<span>email:</span>
<input type="email" name="email">
</label>
<button class="submit" id="signUpSubmit" type="submit" value="signUp">submit</button>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</body>
推荐答案
您仍在此处尝试设置基元的值，而不是对象属性.在JavaScript中，原语是通过 byValue 传递的，而不是通过 byReference 传递的，因此 whichToShow.getVar(); 返回的是 true 或 false ，而不是返回对 logged 的引用.因此，除非再次调用 .getVar()来获取新值，否则您不会看到 logged 的更改.这就是为什么到目前为止您看到的大多数答案都使用某种形式的 $ watch ， $ broadcast 或类似形式来提醒您的 mc 它应该再次询问 logged 变量的当前值.
You are still trying to set the value of primitives here, rather than object properties. In JavaScript, primitives are passed byValue, not byReference, so whichToShow.getVar(); is returning true or false rather than returning a reference to logged. Therefore, you won't see changes to logged unless you call .getVar() again, to get the new value. This is why most answers you have seen so far have had some form of $watch, $broadcast, or similar, to alert your mc that it should ask again for the logged variable's current value.
如果要避免使用 $ watch ，则应使用对象而不是基元.通过使用对象，您可以传递对象 byReference ，该对象将允许angular在任何有引用集的地方查看属性的更改.
If you want to avoid using a $watch, you should use an object instead of a primitive. by using an object, you can pass the object byReference, which will allow angular to see the changes to the properties wherever there is a reference set.
在工厂中，返回一个对象:
In your factory, return an object:
(function() {
'use strict';
angular.module('myApp.value').factory('whichToShow', function() {
alert("running2");
var status = {
logged: false
};
var logged = false;
return {
getVar: function() {
return status;
},
setVar: function(value) {
status.logged = value;
}
};
});
})();
在mainControl中，使用对此对象的引用:
In mainControl, use a reference to this object:
(function() {
'use strict';
angular.module('myApp.value').factory('whichToShow', function() {
alert("running2");
var status = {
logged: false
};
return {
getVar: function() {
return status;
},
setVar: function(value) {
status.logged = value;
}
};
});
})();
最后，使用HTML中的object属性:
And finally, use the object property in the HTML:
<div ng-hide="mc.status.logged">
...
<div ng-show="mc.status.logged">
...
https://plnkr.co/edit/Pindt2LYxDxyk8C5Axp1?p=预览
我什至可以更进一步，只是直接通过服务返回对象，并跳过 getVar 和 setVar 函数.
I might even go one step further and just return the object directly by the service, and skip the getVar and setVar functions.
这篇关于如何从一个控制器设置一项服务的值，以及如何使用此服务更新另一控制器的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
