Using same functions in 2 different controllers AngularJS

Question

I am trying to reuse a few bigger functions over 3 controllers in Angular JS. I don't want to pin the functions to my root scope as I want to keep it clear of functions which will be used only 3 times within those 3 controllers.

    angular.module('adminModule', ['adminDependency'])

        .controller('ctrl1', ['$scope', 'details', function ($scope, details) {
            // use functions
        }])

        .controller('ctrl2', ['$scope', 'details', function ($scope, details) {
            // use functions
        }])

        .controller('ctrl3', ['$scope', 'details', function ($scope, details) {
            // use functions
        }])

Can you tell me how i can achieve that without writing my functions into the root scope?

Tried it inside a factory but calling AdminModule.toLevelKey() wont work...

    .factory('AdminModule',
        [ '$resource', 'serviceURL', function ($resource, serviceURL) {

            return $resource(serviceURL + 'class/:id', {
                    id : '@id'
                }, {
                    getClasses : {
                        method  : 'GET',
                        url     : serviceURL + 'extended/class',
                        isArray : true
                    },

                    toLevelKey : function (value) {
                        var return_key = parseInt(Math.floor(value / 3));
                        var return_level = value % 3;

                        return { level : return_level + 1, levelTranslationKey : return_key + 1 };
                    },

                    fromLevelKey : function (level, key) {
                        if (angular.isDefined(level)) {
                            var value = (key - 1) * 3 + (level - 1);

                            return value;
                        } else {
                            return null;
                        }
                    }
                }
            );
        } ]);

michael · Accepted Answer · 2014-02-12 10:16:16Z

10

This can be done by a service:

.service('myService', function(){
   return {
      fn: function(){
        // do what you want
      }
   }
});

usage:

.controller('ctrl2', ['$scope', 'details', 'myService', 
             function ($scope, details, myService) {
   // use functions
   myService.fn();
}])

answered Feb 12, 2014 at 10:16

michael

16.4k8 gold badges57 silver badges60 bronze badges

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

5 Comments

David Fariña Over a year ago

Seems like a very good solution. Are there even more options?

michael Over a year ago

you may use a factory. but the principle is the same; especially if you need other services in your function. in this case you can easily inject them.

Whisher Over a year ago

Just in case you need setting some params for details you should use a provider.

David Fariña Over a year ago

I do need to pass params. I tried to assign the service functions to the scope but somehow calling AdminService.func(param1, param2) does not work. throwed a infdig error. Edit: I used it inside a factory, is it possible that way?

michael Over a year ago

please show more details (code) what your are trying to do.

Artyom Pranovich · Accepted Answer · 2014-02-12 11:05:15Z

3

In accordance with the above comment of David Fariña: "Are there even more options?".

Except executing, you also can pass data from one controller to another and broadcast event, when it happens.

SharedService:

    angular.module("yourAppName", []).factory("mySharedService", function($rootScope){

        var mySharedService = {};

        mySharedService.values = {};

        mySharedService.setValues = function(params){
            mySharedService.values = params;
            $rootScope.$broadcast('dataPassed');
        }

        return mySharedService; 
   });

FirstController:

 function FirstCtrl($scope, mySharedService) {
      $scope.passDataInSharedSevice = function(params){
         mySharedService.setValues(params);
      }
 }

SecondController:

 function SecondController($scope, mySharedService) {
    $scope.$on('dataPassed', function () {
        $scope.newItems = mySharedService.values;
    });
 }

edited Feb 12, 2014 at 11:05

answered Feb 12, 2014 at 10:24

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

3 Comments

David Fariña Over a year ago

Can the downvoter tell what is wrong with this please?

Artyom Pranovich Over a year ago

@DavidFariña, I think, that downvoter means, that answer not corresponding to question. I add this answer on your comment: "Are there even more options?" The answer contains nothing wrong.

David Fariña Over a year ago

i actually ended up doing it that way as i wasnt able to inject the service where i needed to. Thanks

Collectives™ on Stack Overflow

Using same functions in 2 different controllers AngularJS

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related