Angularjs the transfer of values between different controllers

Source: Internet
Author: User
Tags emit

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.