Parent to child controller communication in angular
Posted By : Rohit Goyal | 27-Dec-2017
Introduction:-
In most of the web app, we have the main controller and all the controller are descendent of that controller.But if want communication
between parent and child controller function then we can use shared service or we can use $broadcast and $on a method for the parent to
child communication. sometimes you have the requirement or you want to send parameter using parent controller function to child
controller function then you use these methods.
Disadvantage of $rootScope : -
The most important drawback of using drawback of using rootScope is that your variables can't remain isolated.You can use your
variable anywhere in your app.
But if
Use of Methods:-
$broadcast method: $broadcast method is used for calling child controller function from the main controller.
$on method: $on method is used for receiving the call of parent controller in child controller.
(i) Parent to child communication:-
You can use the below code on your main controller:-
// get market
$scope.data={};
$scope.getMarket = function(){
$scope.spinner=true;
LayoutService.getMarket().$promise.then(function(resp) {
if(resp.data.markets.length){
$scope.marketList = resp.data.markets;
if(localStorage.getItem('marketDataObj')){
var reterivedMarketDataObj = JSON.parse(localStorage.getItem('marketDataObj'));
$scope.data.instrument = ""+reterivedMarketDataObj.instrument;
$scope.scaleSet = reterivedMarketDataObj.scaleSet;
$scope.currSymbol = reterivedMarketDataObj.currSymbol;
$scope.currSymbolNominal =reterivedMarketDataObj.currSymbolNominal;
$scope.scaleSetQuantity = reterivedMarketDataObj.scaleSetQuantity;
} else{
$scope.data.instrument = ""+$scope.marketList[0].id;
$scope.scaleSet = $scope.marketList[0].limitCurrency.scale;
$scope.currSymbol =$scope.marketList[0].limitCurrency.symbol;
$scope.currSymbolNominal =$scope.marketList[0].nominalCurrency.symbol;
$scope.scaleSetQuantity = $scope.marketList[0].nominalCurrency.scale;
var marketData= {
'instrument': $scope.data.instrument,
'scaleSet':$scope.scaleSet,
'currSymbol':$scope.currSymbol,
'scaleSetQuantity':$scope.scaleSetQuantity,
'currSymbolNominal':$scope.currSymbolNominal
}
localStorage.setItem('marketDataObj', JSON.stringify(marketData));
}
$scope.$broadcast('getMarket',$scope.marketList,$scope.data.instrument,$scope.scaleSet,$scope.scaleSetQuantity);
Here you are extracting the data from getting market function and you want to use
So in this parent to child controller communication can be done.Below is the code of child controller receiving the data from parent controller using $on method.
$scope.$on('getMarket', function(event,marketList,instrument,scaleSet,scaleSetQuantity){
$scope.marketList = marketList;
$scope.data.instrument = instrument;
$scope.scaleSet = scaleSet;
$scope.scaleSetQuantity = scaleSetQuantity;
});
$scope.on method will receive the call from parent controller and inside a function, it will take parent component parameters that can be used further in child controller function. In this, you can pass your parent controller data to the child controller.
(ii) Child to parent communication:-
we have used $parent method for the child to parent communication.
function updateOpenOrder(){
$scope.$parent.updateMarketOpenOrder();
}
This function can call parent controller function. You can also pass any argument with that.
That's it. In this way, you can efficiently use the parent to child communication.
If you have any query or concerns you can contact on my Skype Id:- Rohit.oodles
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.