AngularJS: how to call a function of a child in parent space

Question

How to call a method defined in the scope of child objects from its parent scope?

function ParentCntl() { // I want to call the $scope.get here } function ChildCntl($scope) { $scope.get = function() { return "LOL"; } } 

http://jsfiddle.net/wUPdW/

Answer 1

You can use $broadcast from parent to child:

 function ParentCntl($scope) { $scope.msg = ""; $scope.get = function(){ $scope.$broadcast ('someEvent'); return $scope.msg; } } function ChildCntl($scope) { $scope.$on('someEvent', function(e) { $scope.$parent.msg = $scope.get(); }); $scope.get = function(){ return "LOL"; } } 

Working fiddle: http://jsfiddle.net/wUPdW/2/

UPDATE There is another version, less related and more verifiable:

 function ParentCntl($scope) { $scope.msg = ""; $scope.get = function(){ $scope.$broadcast ('someEvent'); return $scope.msg; } $scope.$on('pingBack', function(e,data) { $scope.msg = data; }); } function ChildCntl($scope) { $scope.$on('someEvent', function(e) { $scope.$emit("pingBack", $scope.get()); }); $scope.get = function(){ return "LOL"; } } 

Fiddle: http://jsfiddle.net/uypo360u/

Answer 2

Let me suggest another solution:

 var app = angular.module("myNoteApp", []); app.controller("ParentCntl", function($scope) { $scope.obj = {}; }); app.controller("ChildCntl", function($scope) { $scope.obj.get = function() { return "LOL"; }; }); 

Less code and the use of prototypal inheritance.

Plunk

Answer 3

Register the child function of the parent when the child is initialized. I used the “how” for clarity in the template.

TEMPLATE

 <div ng-controller="ParentCntl as p"> <div ng-controller="ChildCntl as c" ng-init="p.init(c.get)"></div> </div> 

CONTROLLERS

 ... function ParentCntl() { var p = this; p.init = function(fnToRegister) { p.childGet = fnToRegister; }; // call p.childGet when you want } function ChildCntl() { var c = this; c.get = function() { return "LOL"; }; } 

"But," you say: " ng-init not supposed to be used that way !". Well yeah but

• that the documentation does not explain why not, and
• I do not believe that the authors of the documentation considered ALL possible use cases.

I say that is good for this. If you want to focus me, comment on the reasons! :)

I like this approach because it keeps components more modular. The only bindings are in the template and mean that

• the child controller should not know anything about which object to add its function to (as in @canttouchit's answer)
• a parent control can be used with any other child control that has a get function
• It doesn’t require a broadcast, which will be very ugly in a large application unless you strictly control the event namespace

This approach is closer to the idea of ​​thermo-modulation with directives (note that in its modular example contestants passed from the parent to the "daughter" directive IN THE SAMPLE).

Indeed, another solution would be to consider implementing ChildCntl as a directive and use the & binding to register the init method.