我正在尝试跨控制器共享数据。用例是一种多步骤形式,在一个输入中输入的数据稍后将用于原始控制器之外的多个显示位置。下面和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;
});
任何帮助都非常感激。
有许多方法可以在控制器之间共享数据
使用服务
使用美元的状态。去服务
使用stateparams
使用rootscope
各方法说明:
I am not going to explain as its already explained by someone
using $state.go
$state.go('book.name', {Name: 'XYZ'});
// then get parameter out of URL
$state.params.Name;
$stateparam works in a similar way to $state.go, you pass it as object from sender controller and collect in receiver controller using stateparam
using $rootscope
(a) sending data from child to parent controller
$scope.Save(Obj,function(data) {
$scope.$emit('savedata',data);
//pass the data as the second parameter
});
$scope.$on('savedata',function(event,data) {
//receive the data as second parameter
});
(b) sending data from parent to child controller
$scope.SaveDB(Obj,function(data){
$scope.$broadcast('savedata',data);
});
$scope.SaveDB(Obj,function(data){`enter code here`
$rootScope.$broadcast('saveCallback',data);
});
有许多方法可以在控制器之间共享数据
使用服务
使用美元的状态。去服务
使用stateparams
使用rootscope
各方法说明:
I am not going to explain as its already explained by someone
using $state.go
$state.go('book.name', {Name: 'XYZ'});
// then get parameter out of URL
$state.params.Name;
$stateparam works in a similar way to $state.go, you pass it as object from sender controller and collect in receiver controller using stateparam
using $rootscope
(a) sending data from child to parent controller
$scope.Save(Obj,function(data) {
$scope.$emit('savedata',data);
//pass the data as the second parameter
});
$scope.$on('savedata',function(event,data) {
//receive the data as second parameter
});
(b) sending data from parent to child controller
$scope.SaveDB(Obj,function(data){
$scope.$broadcast('savedata',data);
});
$scope.SaveDB(Obj,function(data){`enter code here`
$rootScope.$broadcast('saveCallback',data);
});
只需简单地执行(在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>
有多种方法可以在控制器之间共享数据
角服务
$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的信息
还有另一种不用$watch的方法,使用angular.copy:
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
var service = {
FirstName: '',
setFirstName: function(name) {
// this is the trick to sync the data
// so no need for a $watch function
// call this from anywhere when you need to update FirstName
angular.copy(name, service.FirstName);
}
};
return service;
});
// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){
});
// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
$scope.FirstName = Data.FirstName;
});
不知道我在哪里得到了这个模式,但对于跨控制器共享数据和减少$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方法,它会把那个广播给那个数据的所有订阅者。这减少了控制器之间的耦合。