Calling a function from controller1 within controller2 in angularjs

Question

I have a controller that updates my awards scope:

Controller 1

.controller("awardController", ['$scope', '$rootScope', 'Restangular', "$q", "$location", "TokenRestangular",
    function ($scope, $rootScope, Restangular, $q, $location, TokenRestangular) {


        $scope.updateAwardScope = function () {
            resource = TokenRestangular.all('award');
            resource.getList()
                .then(function (awards) {
                    $scope.awards = awards;

                })
        }

    }])

Controller 2

I have another controller 2 with a click event thats outside of this controllers scope. Is it possible for the controller below to call the $scope.updateAwardScope function from controller 1?

.controller('MainController', function ($rootScope, $scope) {

 $scope.updateAwardScopeClick = function () {
    // somehow call function from controller 1 

  }


});

@micronyks thanks for the reply. I've used a factory for passing variables around, but how can I use one for calling a function? — Prometheus
– Prometheus, Commented Jul 22, 2014 at 16:32
Besides a factory you can also put the function inside a parent/$rootScope controller. All child controllers will be able to use it. — lucuma
– lucuma, Commented Jul 22, 2014 at 16:40
"I've used a factory for passing variables around" - In javascript, functions can be variables. var my_function = function() { } ; So just do it the same way. — dave
– dave, Commented Jul 22, 2014 at 16:40
@dave thats interesting, do you have to evaluate it somehow so it knows its a function? — Prometheus
– Prometheus, Commented Jul 22, 2014 at 16:43

Gus · Accepted Answer · 2014-07-22 16:50:55Z

I've found the use of the factory/service pattern to be a very effective way of reusing code in angular applications. For this particular case you could create an AwardFactory, inject it in your controllers and then call the update function. i.e

AwardFactory

myApp.factory('AwardFactory', ['TokenRestangular', function(TokenRestangular.all) {
  var factory = {
    awards: []
  };

  factory.update = function() {
    resource = TokenRestangular.all('award');

    resource.getList().then(function (awards) {
      factory.awards = awards;
    });

    return factory.awards; // You can skip the return if you'd like that
  };

  return factory;
}]);

YourController

.controller('MainController', function ($rootScope, $scope, AwardFactory) {

 $scope.updateAwardScopeClick = function () { 
   AwardFactory.update();
 }
});

Hope it helps!

Sandeep Shabd · Accepted Answer · 2014-07-22 17:03:36Z

You can use angular broadcast and receive

Controller1

    .controller("awardController", ['$scope', '$rootScope', 'Restangular', "$q", "$location", "TokenRestangular",
function ($scope, $rootScope, Restangular, $q, $location, TokenRestangular) {


    $scope.updateAwardScope = function () {
        resource = TokenRestangular.all('award');
        resource.getList()
            .then(function (awards) {
                $scope.awards = awards;
                $rootScope.broadcast("update.awards");

            })
    }

}])

Controller 2

    .controller('MainController', function ($rootScope, $scope) {

     $rootScope.$on('update.awards', function(){
        $scope.updateAwardScopeClick();
     });

       $scope.updateAwardScopeClick = function () {
         // somehow call function from controller 1 

         }
       });

Collectives™ on Stack Overflow

Calling a function from controller1 within controller2 in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related