Calling a Function inside a Controller from another Controller - AngularJS

Question

app.config(function($routeProvider) {

  $routeProvider
    .when('/skills', {
      templateUrl: 'skill.html',
      controller: 'SkillThemeCtrl'
    })
    .when('/exp', {
      templateUrl: 'exp.html',
      controller: 'ExpThemeCtrl'
    })
    .when('/', {
      redirectTo: '/skills'
    })
    .otherwise({
      template: '<h1>404</h1>' //or templateUrl: '<h1>404</h1>'
    });
});


app.controller('ThemeCtrl', ['$http',
  function($http) {
    var ctrl = this;
    ctrl.updateTheme = function(getTab) {

    }
  }
]);

app.controller('SkillThemeCtrl', function() {
  updateTheme(1); //This is not working. This function is in ThemeCtrl
});

app.controller('ExpThemeCtrl', function() {
  updateTheme(2); //This is not working. This function is in ThemeCtrl
});

I want to access a Function which is defined inside a Controller from another Controller. I am just learning Angular so please make it simple. I tried different approaches which i was practising in other languages but no chance at all. Thanks alot

Use factory/service to build your common function. – michelem Oct 30 '15 at 12:50 — michelem, Oct 30 '15 at 12:50

score 1 · Answer 1 · edited May 23 '17 at 10:29

In Angular, each controller has it's own $scope. It can't see other controller's scopes (except in some specific scenarios). You've essentially got two options: factory/service OR using an event structure.

For the factory/service, it works because the service has one instance that is shared across the app, so you can call the same function (which has access to the right data) from anywhere in your app.

The event idea might be better suited for you, and it's pretty simple. In your controller you want to call, you can set up a

$scope.$on("eventName", function () {});

This will call a function every time the scope get's an event called 'eventName'

You can create this event by $broadcasting it or $emiting it, depending on your hierarchy. You can also use the $rootScope as an event bus, and listen and emit on that:

//In receiving controller
$rootScope.$on("eventName", function () {
//do stuff here
});


//In calling controler
$rootScope.$emit("eventName");

Good info on events can be found here: Working with $scope.$emit and $scope.$on

score 0 · Answer 2 · answered Oct 30 '15 at 13:11

As @michelemen pointed out in his comment, you want shared methods to be in a factory or service that you inject into your controller. You code might look something like:

 app.config(function($routeProvider) {

   $routeProvider
     .when('/skills', {
       templateUrl: 'skill.html',
       controller: 'SkillThemeCtrl'
     })
     .when('/exp', {
       templateUrl: 'exp.html',
       controller: 'ExpThemeCtrl'
     })
     .when('/', {
       redirectTo: '/skills'
     })
     .otherwise({
       template: '<h1>404</h1>' //or templateUrl: '<h1>404</h1>'
     });

 });


 app.controller('ThemeCtrl', ['$http', 'SkillThemeService',
   function($http, SkillThemeService) {

     var ctrl = this;
    //then use the function like this:
       SkillThemeService.updateTheme();


   }
 ]);


 app.factory('SkillThemeCtrl', function() {
      return {
         updateTheme: updateTheme
       }
   function updateTheme(){
       //do stuff here
       } 
 });

Please note that the code above is just for example purposes, I didn't check to make sure that it's 100% accurate or proper.

score 0 · Accepted Answer · answered Oct 30 '15 at 13:13

Make a common method in factory and inject it in controller where required and call factory method in controller.

Learn about factory and providers

app.factory('ThemeFactory', function() {

  return {
    updateTheme: updateTheme
  };

  function updateTheme(getTab) {
    // DO something common here
  }
});

app.controller('ThemeCtrl', ['$http', 'ThemeFactory',
  function($http, ThemeFactory) {
    var ctrl = this;
    ctrl.updateTheme = ThemeFactory.updateTheme;
  }
]);

app.controller('SkillThemeCtrl', ['ThemeFactory',
  function(ThemeFactory) {
    ThemeFactory.updateTheme(1); //This is not working. This function is in ThemeCtrl
  }
]);

app.controller('ExpThemeCtrl', ['ThemeFactory',
  function(ThemeFactory) {
    ThemeFactory.updateTheme(2); //This is not working. This function is in ThemeCtrl
  }
]);

Calling a Function inside a Controller from another Controller - AngularJS

3 Answers3