How to call a function from another controller in AngularJS? [duplicate]

65
votes

I need to call a function in another controller in AngularJS. How can I do this?

Code:

app.controller('One', ['$scope',
    function($scope) {
        $scope.parentmethod = function() {
            // task
        }
    }
]);

app.controller('two', ['$scope',
    function($scope) {
        $scope.childmethod = function() {
            // Here i want to call parentmethod of One controller
        }
    }
]);
6
angularjscontrollerangularjs-scope
Put the function in a service, and inject the service in both controllers. Or, if the second controller scope is a child of the first controller scope, call it directly. - JB Nizet
This feels like an XY Question to me; While there are a few ways you can call a function on another controller, there are really very few good reasons that you have to do so. Perhaps describing what your actual problem is would be more helpful than asking about the solution you are trying to implement? Calling a function on a different controller isn't really the "angular way" of doing things. - Claies
is one controller a child/grand-child of the other controller? Or are they unrelated siblings? - pixelbits

6 Answers

131
votes

Communication between controllers is done though $emit + $on / $broadcast + $on methods.

So in your case you want to call a method of Controller "One" inside Controller "Two", the correct way to do this is: 

app.controller('One', ['$scope', '$rootScope'
    function($scope) {
        $rootScope.$on("CallParentMethod", function(){
           $scope.parentmethod();
        });

        $scope.parentmethod = function() {
            // task
        }
    }
]);
app.controller('two', ['$scope', '$rootScope'
    function($scope) {
        $scope.childmethod = function() {
            $rootScope.$emit("CallParentMethod", {});
        }
    }
]);

While $rootScope.$emit is called, you can send any data as second parameter.

25
votes

I wouldn't use function from one controller into another. A better approach would be to move the common function to a service and then inject the service in both controllers.

8
votes

You may use events to provide your data. Code like that:

app.controller('One', ['$scope', function ($scope) {
         $scope.parentmethod=function(){
                 $scope.$emit('one', res);// res - your data
         }
    }]);
    app.controller('two', ['$scope', function ($scope) {
         $scope.$on('updateMiniBasket', function (event, data) {
                ...
         });             
    }]);
7
votes

If the two controller is nested in One controller.
Then you can simply call: 

$scope.parentmethod();

Angular will search for parentmethod function starting with current scope and up until it will reach the rootScope.

5
votes

The best approach for you to communicate between the two controllers is to use events.

See the scope documentation

In this check out $on, $broadcast and $emit.

2
votes

If you would like to execute the parent controller's parentmethod function inside a child controller, call it: 

$scope.$parent.parentmethod();

You can try it over here