在AngularJS控制器之间共享数据

本文翻译自：Share data between AngularJS controllers

I'm trying to share data across controllers. 我正在尝试跨控制器共享数据。 Use-case is a multi-step form, data entered in one input is later used in multiple display locations outside the original controller. 用例是一种多步形式，在一个输入中输入的数据稍后用于原始控制器外的多个显示位置。 Code below and in jsfiddle here . 下面的代码和jsfiddle这里。

HTML HTML

<div ng-controller="FirstCtrl"><input type="text" ng-model="FirstName"><!-- Input entered here --><br>Input is : <strong>{{FirstName}}</strong><!-- Successfully updates here -->
</div><hr><div ng-controller="SecondCtrl">Input should also be here: {{FirstName}}<!-- How do I automatically updated it here? -->
</div>

JS JS

// declare the app with no dependencies
var myApp = angular.module('myApp', []);// make a factory to share data between controllers
myApp.factory('Data', function(){// I know this doesn't work, but what will?var FirstName = '';return FirstName;
});// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){});// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){$scope.FirstName = Data.FirstName;
});

Any help is greatly appreciated. 任何帮助是极大的赞赏。

#1楼

参考：https://stackoom.com/question/1TyNm/在AngularJS控制器之间共享数据

#2楼

A simple solution is to have your factory return an object and let your controllers work with a reference to the same object: 一个简单的解决方案是让您的工厂返回一个对象，让您的控制器使用对同一对象的引用：

JS: JS：

// declare the app with no dependencies
var myApp = angular.module('myApp', []);// Create the factory that share the Fact
myApp.factory('Fact', function(){return { Field: '' };
});// Two controllers sharing an object that has a string in it
myApp.controller('FirstCtrl', function( $scope, Fact ){$scope.Alpha = Fact;
});myApp.controller('SecondCtrl', function( $scope, Fact ){$scope.Beta = Fact;
});

HTML: HTML：

<div ng-controller="FirstCtrl"><input type="text" ng-model="Alpha.Field">First {{Alpha.Field}}
</div><div ng-controller="SecondCtrl">
<input type="text" ng-model="Beta.Field">Second {{Beta.Field}}
</div>

Demo: http://jsfiddle.net/HEdJF/ 演示： http ： //jsfiddle.net/HEdJF/

When applications get larger, more complex and harder to test you might not want to expose the entire object from the factory this way, but instead give limited access for example via getters and setters: 当应用程序变得更大，更复杂且更难测试时，您可能不希望以这种方式从工厂公开整个对象，而是通过getter和setter提供有限的访问权限：

myApp.factory('Data', function () {var data = {FirstName: ''};return {getFirstName: function () {return data.FirstName;},setFirstName: function (firstName) {data.FirstName = firstName;}};
});

With this approach it is up to the consuming controllers to update the factory with new values, and to watch for changes to get them: 通过这种方法，消费控制器可以使用新值更新工厂，并观察更改以获取它们：

myApp.controller('FirstCtrl', function ($scope, Data) {$scope.firstName = '';$scope.$watch('firstName', function (newValue, oldValue) {if (newValue !== oldValue) Data.setFirstName(newValue);});
});myApp.controller('SecondCtrl', function ($scope, Data) {$scope.$watch(function () { return Data.getFirstName(); }, function (newValue, oldValue) {if (newValue !== oldValue) $scope.firstName = newValue;});
});

HTML: HTML：

<div ng-controller="FirstCtrl"><input type="text" ng-model="firstName"><br>Input is : <strong>{{firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">Input should also be here: {{firstName}}
</div>

Demo: http://jsfiddle.net/27mk1n1o/ 演示： http ： //jsfiddle.net/27mk1n1o/

#3楼

I prefer not to use $watch for this. 我不想使用$watch这件事。 Instead of assigning the entire service to a controller's scope you can assign just the data. 您可以只分配数据，而不是将整个服务分配给控制器的范围。

JS: JS：

var myApp = angular.module('myApp', []);myApp.factory('MyService', function(){return {data: {firstName: '',lastName: ''}// Other methods or objects can go here};
});myApp.controller('FirstCtrl', function($scope, MyService){$scope.data = MyService.data;
});myApp.controller('SecondCtrl', function($scope, MyService){$scope.data = MyService.data;
});

HTML: HTML：

<div ng-controller="FirstCtrl"><input type="text" ng-model="data.firstName"><br>Input is : <strong>{{data.firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">Input should also be here: {{data.firstName}}
</div>

Alternatively you can update the service data with a direct method. 或者，您可以使用直接方法更新服务数据。

JS: JS：

// A new factory with an update method
myApp.factory('MyService', function(){return {data: {firstName: '',lastName: ''},update: function(first, last) {// Improve this method as neededthis.data.firstName = first;this.data.lastName = last;}};
});// Your controller can use the service's update method
myApp.controller('SecondCtrl', function($scope, MyService){$scope.data = MyService.data;$scope.updateData = function(first, last) {MyService.update(first, last);}
});

#4楼

I've created a factory that controls shared scope between route path's pattern, so you can maintain the shared data just when users are navigating in the same route parent path. 我创建了一个控制路径路径模式之间共享范围的工厂，因此您可以在用户在同一路径父路径中导航时维护共享数据。

.controller('CadastroController', ['$scope', 'RouteSharedScope',function($scope, routeSharedScope) {var customerScope = routeSharedScope.scopeFor('/Customer');//var indexScope = routeSharedScope.scopeFor('/');}])

So, if the user goes to another route path, for example '/Support', the shared data for path '/Customer' will be automatically destroyed. 因此，如果用户转到另一个路径路径，例如'/ Support'，路径'/ Customer'的共享数据将自动销毁。 But, if instead of this the user goes to 'child' paths, like '/Customer/1' or '/Customer/list' the the scope won't be destroyed. 但是，如果不是这样，用户转到'子'路径，如'/ Customer / 1'或'/ Customer / list'，则不会破坏范围。

You can see an sample here: http://plnkr.co/edit/OL8of9 您可以在此处查看示例： http ： //plnkr.co/edit/OL8of9

#5楼

Just do it simple (tested with v1.3.15): 只是做到这一点（用v1.3.15测试）：

<article ng-controller="ctrl1 as c1"><label>Change name here:</label><input ng-model="c1.sData.name" /><h1>Control 1: {{c1.sData.name}}, {{c1.sData.age}}</h1>
</article>
<article ng-controller="ctrl2 as c2"><label>Change age here:</label><input ng-model="c2.sData.age" /><h1>Control 2: {{c2.sData.name}}, {{c2.sData.age}}</h1>
</article><script>var app = angular.module("MyApp", []);var dummy = {name: "Joe", age: 25};app.controller("ctrl1", function () {this.sData = dummy;});app.controller("ctrl2", function () {this.sData = dummy;});
</script>

#6楼

Not sure where I picked up this pattern but for sharing data across controllers and reducing the $rootScope and $scope this works great. 不知道我在哪里选择这种模式，但是为了跨控制器共享数据并减少$ rootScope和$ scope，这非常有用。 It is reminiscent of a data replication where you have publishers and subscribers. 它让人联想到您拥有发布者和订阅者的数据复制。 Hope it helps. 希望能帮助到你。

The Service: 服务：

(function(app) {"use strict";app.factory("sharedDataEventHub", sharedDataEventHub);sharedDataEventHub.$inject = ["$rootScope"];function sharedDataEventHub($rootScope) {var DATA_CHANGE = "DATA_CHANGE_EVENT";var service = {changeData: changeData,onChangeData: onChangeData};return service;function changeData(obj) {$rootScope.$broadcast(DATA_CHANGE, obj);}function onChangeData($scope, handler) {$scope.$on(DATA_CHANGE, function(event, obj) {handler(obj);});}}
}(app));

The Controller that is getting the new data, which is the Publisher would do something like this.. 获取新数据的Controller，即发布者将执行此类操作。

var someData = yourDataService.getSomeData();sharedDataEventHub.changeData(someData);

The Controller that is also using this new data, which is called the Subscriber would do something like this... 同样使用这个新数据的Controller，称为订阅者，会做这样的事......

sharedDataEventHub.onChangeData($scope, function(data) {vm.localData.Property1 = data.Property1;vm.localData.Property2 = data.Property2;
});

This will work for any scenario. 这适用于任何场景。 So when the primary controller is initialized and it gets data it would call the changeData method which would then broadcast that out to all the subscribers of that data. 因此，当初始化主控制器并获取数据时，它将调用changeData方法，然后将该方法广播给该数据的所有订户。 This reduces the coupling of our controllers to each other. 这减少了我们的控制器之间的耦合。

在AngularJS控制器之间共享数据相关推荐

在视图控制器之间传递数据
我是iOS和Objective-C以及整个MVC范例的新手,但我坚持以下几点: 我有一个充当数据输入表单的视图,我想给用户选择多个产品的选项. 这些产品在另一个带有UITableViewControl ...
使用内存映射文件在进程之间共享数据
数据共享方法是通过让两个或多个进程映射同一个文件映射对象的视图来实现的,这意味着它们将共享物理存储器的同一个页面.因此,当一个进程将数据写入一个共享文件映射对象的视图时,其他进程可以立即看到它们视图中 ...
python跨文件全局变量_Python 进程之间共享数据(全局变量)的方法
进程之间共享数据(数值型): import multiprocessing def func(num): num.value=10.78 #子进程改变数值的值,主进程跟着改变 if __name__= ...
Python 进程之间共享数据(全局变量)
Python 进程之间共享数据(全局变量) 进程之间共享数据(数值型): import multiprocessing def func(num): num.value=10.78 #子进程改变数值的 ...
Java高并发编程：多个线程之间共享数据的方式探讨
内容摘要多个线程之间共享数据,按照每个线程执行代码是否相同,我们可以采取不同的处理方式,这里通过简单的卖票示例说明了当每个线程执行相同代码的情况,对于多个线程执行不同代码的情况,处理方式比较灵活,这 ...
andriod 多个Activity之间共享数据
在项目中要在多个Activity之间共享数据,刚开始想了多种方法,但是都失败了,通过查找资料,Android提供了一个叫Application的共享数据很合适,下面就贴出代码. 写一个继承Applic ...
python进程共享全局变量时延_Python 进程之间共享数据(全局变量)的方法
进程之间共享数据(数值型): import multiprocessing def func(num): num.value=10.78 #子进程改变数值的值,主进程跟着改变 if __name__= ...
Docker精华问答 | 多个 Docker 容器之间共享数据怎么办？
在计算机技术日新月异的今天, Docker 在国内发展的如火如荼.特别是在一线互联网公司 Docker 的使用是十分普遍的,甚至成为了一些企业面试的加分项,那么今天我们继续关于Docker 的精华问答 ...
用内存映射在多个应用程序之间共享数据
文件的内存映射的主要用途有两个方面,第一是用来在多个进程之间共享数据,第二是直接用内存映射文件来访问磁盘上的数据文件,无需要进行文件的I/O操作.进程间共享数据有很多种方法,今天,我主要讲的是内存映射 ...

在AngularJS控制器之间共享数据

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

在AngularJS控制器之间共享数据相关推荐

最新文章

热门文章