[英]Sharing data between controllers in Angular JS?
Before this is marked as duplicate I've read quite of few similar questions, but all the answers I've found seem to use $scope, and after reading the documentation I'm not really sure I understand $scope, or why I'd use it in this situation. 在将此标记为重复之前,我已经阅读了很多类似的问题,但是我发现的所有答案似乎都使用$ scope,并且在阅读了文档之后,我不确定自己是否理解$ scope,或者为什么我知道d在这种情况下使用它。
I found this tutorial which describes how to do what I'm trying to do. 我发现本教程描述了如何做我想做的事情。
However, it's using an array of data. 但是,它使用的是数据数组。 I just need one solid variable.
我只需要一个实数变量。 In addition, I don't know why he's declaring an additional object to the factory service he creates;
另外,我不知道他为什么要为他创建的工厂服务声明一个附加对象; why not just use the factory as the object?
为什么不仅仅使用工厂作为对象?
I was thinking I could do something like this, but I'm not sure if it will work or not. 我当时以为可以做这样的事情,但是我不确定它是否会起作用。
Creating my factory/service: 创建我的工厂/服务:
var demoModule = angular.module("demoModule", []);
demoModule.factory("demoService", function() {
var demoSharedVariable = null;
return demoSharedVariable;
});
Accessing the shared variable in each controller: 访问每个控制器中的共享变量:
var demoControllerOne = demoModule.controller("demoContollerOne", function(demoSharedVariable) {
this.oneFunction = function(oneInput){
demoSharedVariable = oneInput;
};
});
var demoControllerTwo = demoModule.controller("demoContollerTwo", function(demoSharedVariable) {
this.twoFunction = function(twoInput){
demoSharedVariable = twoInput;
};
});
Will this method produced the shared variable I'm after? 这种方法会产生我想要的共享变量吗?
You need to inject the service in order to use it, then access the service variable. 您需要注入服务才能使用它,然后访问服务变量。
demoModule.controller("demoContollerOne", function($scope, demoService) {
$scope.oneFunction = function(){
demoService.demoSharedVariable = $scope.oneInput;
};
});
demoModule.controller("demoContollerTwo", function($scope, demoService) {
$scope.twoFunction = function(){
demoService.demoSharedVariable = $scope.twoInput;
};
});
If you are using controllerAs, you rarely (or shouldn't) need to inject and use $scope. 如果使用controllerAs,则很少(或不应)注入并使用$ scope。 As controllerAs is a relatively newer feature, back then we have no choice but to use $scope, so it is not strange to find example with $scope.
由于controllerAs是一个相对较新的功能,所以那时我们别无选择,只能使用$ scope,因此使用$ scope查找示例并不奇怪。
Edit: If you are not using controllerAs (like in this example) you would need $scope to expose functions or variables to the view. 编辑:如果您不使用controllerAs(如本例中所示),则需要$ scope将函数或变量公开给视图。
There are several place that are not correct I've found while fiddling with it, I'll edit the code. 摆弄它时,有几个地方不正确,我将编辑代码。 I don't know how to showcase the effect without using advanced concept like $watch, please provide your own fiddle if you don't understand.
我不知道如何在不使用$ watch等高级概念的情况下展示效果,如果您不了解,请提供您自己的小提琴。
One important thing is if you want to use angular, you have to understand the knowledge of scope. 重要的一件事是,如果您想使用角度,则必须了解范围的知识。
Since neither you factory or controller is correct, i write a simple example for you to help you understand the service: 由于您的工厂或控制器都不正确,因此我为您编写了一个简单的示例来帮助您了解服务:
detail implementation in this plnkr : 此plnkr中的详细实现 :
service: 服务:
angular.module('myApp').service('MyService', [function() {
var yourSharedVariable; // Your shared variable
//Provide the setter and getter methods
this.setSharedVariable = function (newVal) {
yourSharedVariable = newVal;
};
this.getSharedVariable = function () {
return yourSharedVariable;
};
}
]);
controller: 控制器:
myApp.controller('Ctrl2', ['$scope', 'MyService', '$window', function($scope, MyService, $window) {//inject MyService into the controller
$scope.setShared = function(val) {
MyService.setSharedVariable(val);
};
$scope.getShared = function() {
return MyService.getSharedVariable();
};
$scope.alertSharedVariable = function () {
$window.alert(MyService.getSharedVariable());
};
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.