Call function from another Controller Angular Js

Question

I am new to using angular js and i have declare many controller and now i want to user function of one controller into another controller. here is my sample code.

app.controller('Controller1',function($scope,$http,$compile){
    $scope.test1=function($scope)
    {
          alert("test1");
    }
});

app.controller('Controller2',function($scope,$http,$compile){
    $scope.test2=function($scope)
    {
          alert("test1");
    }
});
app.controller('Controller3',function($scope,$http,$compile){
  ///
});

Now i want to call test2 function inside controller3. Can anybody help.. Thanks in Avance... :)

RSquared · Accepted Answer · 2014-08-29 07:03:38Z

13

You can't call a method from a controller within a controller. You will need to extract the method out, create a service and call it. This will also decouple the code from each other and make it more testable

(function() {
    angular.module('app', [])
        .service('svc', function() {
            var svc = {};

            svc.method = function() {
                alert(1);
            }

            return svc;
        })
        .controller('ctrl', [
            '$scope', 'svc', function($scope, svc) {
                svc.method();
            }
        ]);
})();

Example: http://plnkr.co/edit/FQnthYpxgxAiIJYa69hu?p=preview

answered Aug 29, 2014 at 7:03

RSquared

1,20811 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Seminda · Accepted Answer · 2014-08-29 07:08:33Z

4

Best way is write a service and use that service in both controllers. see the documentation Service documentation

If you really want to access controller method from another controller then follow the below option: emitting an event on scope:

function FirstController($scope) {  $scope.$on('someEvent', function(event, args) {});}

function SecondController($scope) {  $scope.$emit('someEvent', args);}

edited Aug 29, 2014 at 7:08

answered Aug 29, 2014 at 6:45

Seminda

1,77312 silver badges16 bronze badges

2 Comments

Mayur Over a year ago

Yes But i we have already written code with lots of controller so now i have to call one function which is in another controller.

Seminda Over a year ago

Thats fine. only you need is move that common function to a service and call it from required controllers.

noypi · Accepted Answer · 2014-08-29 07:23:19Z

The controller is a constructor, it will create a new instance if for example used in a directive.

You can still do what you wanted, assuming that your controllers are in the same scope, just do:

Note they must be in the same scope, could still work if a child scope was not isolated. The directive's definition:

{
    controller: Controller1,
    controllerAs: 'ctrl1',
    link: function($scope) {

        $scope.ctrl1.test1(); // call a method from controller 1
        $scope.ctrl2.test2(); // created by the directive after this definition
        $scope.ctrl3.test3(); // created by the directive after this definition
    }
}

....
{
    controller: Controller2,
    controllerAs: 'ctrl2',
    link: function($scope) {
        $scope.ctrl1.test1(); // created earlier
        $scope.ctrl2.test2(); // ...
        $scope.ctrl3.test3(); // created by the directive after this definition
    }
}

....
{
    controller: Controller3,
    controllerAs: 'ctrl3',
    link: function($scope) {
        $scope.ctrl1.test1();
        $scope.ctrl2.test2();
        $scope.ctrl3.test3();
    }
}

This should work.

Collectives™ on Stack Overflow

Call function from another Controller Angular Js

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest