angularJS: How to call child scope function in parent scope

Solution 1:

You can use $broadcast from the parent to a 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 coupled and more testable:

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/

Solution 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 using prototypical inheritance.

Plunk

Solution 3:

Register the child's function on the parent when the child is initialising. I used "as" notation 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 isn't supposed to be used this way!". Well, yes, but

1. that documentation doesn't explain why not, and
2. I don't believe the documentation authors considered ALL possible use cases for it.

I say this is a good use for it. If you want to downvote me, please comment with reasons! :)

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

• the child Controller doesn't have to know anything about which object to add its function to (as in @canttouchit's answer)
• the parent control can be used with any other child control which has a get function
• doesn't require broadcasting, which will get very ugly in a big app unless you tightly control the event namespace

This approach more closely approaches Tero's idea of modularising with directives (note that in his modularised example, contestants is passed from parent to "child" directive IN THE TEMPLATE).

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