Sharing data between controllers in AngularJS
I wrote this article to show how it can possible to pass data from one Controller to another one.
There are two ways to do it, using a service or exploiting depending parent/child relation between controller scopes.
In this post, we’ll analyze the last one method.
It is possible to send data from parent controller to a child controller and viceversa.
To transmit data from the FirstController to SecondController, which the scope of the first one is parent to the scope of the second one, it should use $broadcast method in the FirstController.
Here the javascript code:父传（$scope.$broadcast）子接收（$scope.$on）
angular.module('myApp', [])
.controller('ParentCtrl', ['$scope', function($scope) {
$scope.message = "Child updated from parent controller";
$scope.clickFunction = function() {
$scope.$broadcast('update_parent_controller', $scope.message);
};
}
])
.controller('ChildCtrl', ['$scope', function($scope) {
$scope.message = "Some text in child controller";
$scope.$on("update_parent_controller", function(event, message) {
$scope.message = message;
});
}
]);
Here a plunker for a live demo.
Instead, if it need to send data from the SecondController (child) to the FirstController (parent), it should use the $emit method.
Here the javascript code:子传（$scope.$emit）父接收（$scope.$on）
angular.module('myApp', [])
.controller('ParentCtrl', ['$scope', function ($scope) {
$scope.message = "Some text in parent";
$scope.$on("update_parent_controller", function(event, message){
$scope.message = message;
});
}])
.controller('ChildCtrl', ['$scope', function ($scope) {
$scope.clickFunction = function() {
$scope.message = "Parent updated";
$scope.$emit('update_parent_controller', $scope.message);
}
}]);
Here a plunker for a live demo.
Finally, here a little trick where two controller have no parent/child relationship.
It should pass data from one controller through $rootScope and the $broadcast method.
Here the javascript code:兄弟传（$rootScope.$broadcast）兄弟接收（$rootScope.$on）
angular.module('myApp', [])
.controller('FirstCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.message = "Clicked!";
$rootScope.clickFunction = function() {
$rootScope.$broadcast("Update", $scope.message);
};
}])
.controller('SecondCtrl', ['$scope','$rootScope', function($scope,$rootScope) {
$scope.message = "Waiting for a click...";
$rootScope.$on("Update", function(event, message) {
$scope.message = message;
});
}]);
Here a plunker for a live demo.
以上三个Demo 打不开，需要FQ。