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 is 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 the possible to send data from the parent controller to a child controller and viceversa.
To transmit data from the Firstcontroller to Secondcontroller, which the scope of the first one are the 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's a plunker for a live demo.
Instead, if it need to send data from the Secondcontroller to the Firstcontroller (parent), it should use the $emi T 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's a plunker for a live demo.
Finally, here a little trick where the controller has 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's a plunker for a live demo.
Above three demo can't open, need FQ.
Angularjs the transfer of values between different controllers