How to call a function from another controller in AngularJS?

Question

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

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, Apr 06 '15 at 07:47
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, Apr 06 '15 at 07:49
is one controller a child/grand-child of the other controller? Or are they unrelated siblings? — Michael Kang, Apr 06 '15 at 08:11

score 137 · Accepted Answer · edited Oct 25 '16 at 07:39

137

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.

edited Oct 25 '16 at 07:39

Devid Farinelli

7,514
9
42
73

answered Apr 06 '15 at 09:23

Yashika Garg

2,346
2
15
17

2

I am able to call the function just using $rootScope.function_name(); – Md. Nahiduzzaman Rose Dec 22 '16 at 06:40
with a minor issue for param passing.. this resolved a big issue of mine. Thanks – Naila Akbar Nov 09 '17 at 05:46
1

we can not pass parameter like this. 1st param is event whereas 2nd is data. like $rootScope.$on("CallParentMethod", function(event,data){{}); – Adeel Shekhani Oct 30 '18 at 19:02

score 28 · Answer 2 · answered Apr 06 '15 at 07:50

28

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.

answered Apr 06 '15 at 07:50

Junaid

1,708
16
25

6

This is not always possible – Terra Ashley Apr 21 '17 at 23:32

score 10 · Answer 3 · answered Apr 06 '15 at 07:47

10

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

answered Apr 06 '15 at 07:47

vitalik_74

4,573
2
19
27

1

Life saver. There is an answer above , I followed it and it almost worked for me but param was not received. He missed the point that if we want to pass param, we need to do $scope.$on('someMehotdName',function(event,data){}); – Adeel Shekhani Oct 30 '18 at 19:00

score 7 · Answer 4 · edited Oct 25 '16 at 07:38

7

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.

edited Oct 25 '16 at 07:38

Devid Farinelli

7,514
9
42
73

answered Apr 06 '15 at 09:23

cheziHoyzer

4,803
12
54
81

score 5 · Answer 5 · edited Oct 25 '16 at 07:37

5

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.

edited Oct 25 '16 at 07:37

Devid Farinelli

7,514
9
42
73

answered Apr 06 '15 at 07:50

Reena

1,109
8
16

score 2 · Answer 6 · edited Oct 25 '16 at 07:38

2

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

edited Oct 25 '16 at 07:38

Devid Farinelli

7,514
9
42
73

answered Apr 06 '15 at 08:44

ER144

690
4
10

How to call a function from another controller in AngularJS?

6 Answers6

Linked

Related