我正在尝试跨控制器共享数据。用例是一种多步骤形式，在一个输入中输入的数据稍后将用于原始控制器之外的多个显示位置。下面和jsfiddle中的代码。
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
// 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;
});
任何帮助都非常感激。
只需简单地执行(在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>
不知道我在哪里得到了这个模式，但对于跨控制器共享数据和减少$rootScope和$scope，这工作得很好。这让人想起有发布者和订阅者的数据复制。希望能有所帮助。
服务:
(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));
得到新数据的控制器，也就是发布者，会做这样的事情。
var someData = yourDataService.getSomeData();
sharedDataEventHub.changeData(someData);
同样使用这些新数据的控制器，也就是所谓的订阅服务器，会做这样的事情…
sharedDataEventHub.onChangeData($scope, function(data) {
vm.localData.Property1 = data.Property1;
vm.localData.Property2 = data.Property2;
});
这适用于任何场景。当主控制器被初始化，它得到数据时，它会调用changeData方法，它会把那个广播给那个数据的所有订阅者。这减少了控制器之间的耦合。
只需简单地执行(在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>
我已经创建了一个工厂来控制路由路径模式之间的共享作用域，因此您可以在用户在相同的路由父路径中导航时维护共享数据。
.controller('CadastroController', ['$scope', 'RouteSharedScope',
function($scope, routeSharedScope) {
var customerScope = routeSharedScope.scopeFor('/Customer');
//var indexScope = routeSharedScope.scopeFor('/');
}
])
因此，如果用户转到另一个路由路径，例如'/Support'，路径'/Customer'的共享数据将被自动销毁。但是，如果用户去到“子”路径，比如“/Customer/1”或“/Customer/list”，作用域不会被销毁。
您可以在这里看到一个示例:http://plnkr.co/edit/OL8of9
有多种方法可以在控制器之间共享数据
角服务
$broadcast， $emit方法
父到子控制器通信
rootscope美元
众所周知，$rootscope不是数据传输或通信的首选方式，因为它是一个全局作用域，可用于整个应用程序
对于Angular Js控制器之间的数据共享，Angular服务是最佳实践，例如.factory， .service
供参考
如果数据从父控制器传输到子控制器，您可以通过$scope直接访问子控制器中的父数据
如果你正在使用ui-router，那么你可以使用$stateParmas来传递url参数，如id，名称，键等
$broadcast也是在控制器之间从父控制器传输数据到子控制器的好方法，$emit是将数据从子控制器传输到父控制器的好方法
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>
JS
myApp.controller('FirstCtrl', function( $rootScope, Data ){
$rootScope.$broadcast('myData', {'FirstName': 'Peter'})
});
myApp.controller('SecondCtrl', function( $rootScope, Data ){
$rootScope.$on('myData', function(event, data) {
$scope.FirstName = data;
console.log(data); // Check in console how data is coming
});
});
参考给出的链接了解更多关于$broadcast的信息
最简单的解决方案:
我使用了AngularJS服务。
我已经创建了一个名为SharedDataService的AngularJS服务。
myApp.service('SharedDataService', function () {
var Person = {
name: ''
};
return Person;
});
步骤2:创建两个控制器并使用上面创建的服务。
//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
function ($scope, SharedDataService) {
$scope.Person = SharedDataService;
}]);
//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
function ($scope, SharedDataService) {
$scope.Person = SharedDataService;
}]);
步骤3:在视图中使用已创建的控制器。
<body ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="Person.name">
<br>Input is : <strong>{{Person.name}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
Input should also be here: {{Person.name}}
</div>
</body>
要查看此问题的工作解决方案，请按下面的链接
https://codepen.io/wins/pen/bmoYLr
. html文件:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="Person.name">
<br>Input is : <strong>{{Person.name}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
Input should also be here: {{Person.name}}
</div>
//Script starts from here
<script>
var myApp = angular.module("myApp",[]);
//create SharedDataService
myApp.service('SharedDataService', function () {
var Person = {
name: ''
};
return Person;
});
//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
function ($scope, SharedDataService) {
$scope.Person = SharedDataService;
}]);
//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
function ($scope, SharedDataService) {
$scope.Person = SharedDataService;
}]);
</script>
</body>
</html>
