How to call a function from another controller in AngularJS?

AngularjsControllerAngularjs Scope

Angularjs Problem Overview


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
        }
    }
]);

Angularjs Solutions


Solution 1 - Angularjs

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.

Solution 2 - Angularjs

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.

Solution 3 - Angularjs

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) {
                ...
         });             
    }]);

Solution 4 - Angularjs

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.

Solution 5 - Angularjs

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.

Solution 6 - Angularjs

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBhavesh ChauhanView Question on Stackoverflow
Solution 1 - AngularjsYashika GargView Answer on Stackoverflow
Solution 2 - AngularjsJunaidView Answer on Stackoverflow
Solution 3 - Angularjsvitalik_74View Answer on Stackoverflow
Solution 4 - AngularjscheziHoyzerView Answer on Stackoverflow
Solution 5 - AngularjsReenaView Answer on Stackoverflow
Solution 6 - AngularjsER144View Answer on Stackoverflow