Combining common function in controllers AngularJS

Question

I am working with the project. I am using pagination, checkAll, deleteAll like functionalities that are common between all controllers. I wish to move the code to factory or service so can be utilize to all controllers. I tried but not clear with perfection. I want hint. I know to create factory or service, and how to intefrate it controller but bit confuse with logic of moving similar code.

I give example that I use to write in all controller, Logic for Sorting and pagination as well.

$scope.bigCurrentPage = 1;
$scope.editIndex = "";

var sortKey = "name";
var sortDirection = "ASC";
$scope.filterObj = {order: [sortKey + " " + sortDirection], limit: CONFIG.limit, offset: 0};
$scope.filterObj.offset = ($scope.bigCurrentPage - 1) * CONFIG.limit;

$scope.sortList = function (inputSort) {
    if (sortKey === inputSort) {
        sortDirection = (sortDirection === "ASC") ? "DESC" : "ASC";
    } else {
        sortKey = inputSort;
    }
    $scope.filterObj.order = [sortKey + " " + sortDirection];
    $scope.pageChanged();
}


$scope.getSongs = function () {
    $scope.filterObj.offset = ($scope.bigCurrentPage - 1) * CONFIG.limit;
    Song.find({filter: $scope.filterObj})
            .$promise
            .then(function (data) {
                $scope.items = data;
                $scope.maxSize = 5;
                $scope.size = $scope.filterObj.limit;
                $scope.countingIndex = ($scope.bigCurrentPage - 1) * $scope.filterObj.limit; //Its idea to implement counting. Variable is not part of pagination..////     
            });
};


$scope.pageChanged = function () {
    $scope.getSongs();
};

$scope.pageChanged();

This way, suppose I am doing this for Albums and I would change sortKey as 'id', Will use services with 'Album.find', would change 'filter' object and I am done, but fact is I am using common code in all controllers. How would I write it in better way.

Since you are using a bunch of $scope then services would not be appropriate. Make yourself a base controller class and inherit from it. — Cerad
– Cerad, Commented Apr 18, 2015 at 18:37

Pankaj Parkar · Accepted Answer · 2015-04-18 19:39:48Z

4

You do have lots of properties which are very hard to maintain in service, so I'd suggest that you should use controller rather than service,(Or put reusable variable in service that would make more code sense). Below is created controller can be inject-able in any other controller using $controller dependency.

Common Controller

app.controller('commonCtrl', function($scope) {
    $scope.bigCurrentPage = 1;
    $scope.editIndex = "";

    var sortKey = "name";
    var sortDirection = "ASC";
    $scope.filterObj = {
        order: [sortKey + " " + sortDirection],
        limit: CONFIG.limit,
        offset: 0
    };
    $scope.filterObj.offset = ($scope.bigCurrentPage - 1) * CONFIG.limit;

    $scope.sortList = function(inputSort) {
        if (sortKey === inputSort) {
            sortDirection = (sortDirection === "ASC") ? "DESC" : "ASC";
        } else {
            sortKey = inputSort;
        }
        $scope.filterObj.order = [sortKey + " " + sortDirection];
        $scope.pageChanged();
    }

    $scope.getSongs = function() {
        $scope.filterObj.offset = ($scope.bigCurrentPage - 1) * CONFIG.limit;
        Song.find({
                filter: $scope.filterObj
            })
            .$promise
            .then(function(data) {
                $scope.items = data;
                $scope.maxSize = 5;
                $scope.size = $scope.filterObj.limit;
                $scope.countingIndex = ($scope.bigCurrentPage - 1) * $scope.filterObj.limit; //Its idea to implement counting. Variable is not part of pagination..////     
            });
    };

    $scope.pageChanged = function() {
        $scope.getSongs();
    };

    $scope.pageChanged();
});

You could inject this created commonCtrl to any other controller using $controller dependency, commonCtrl shares it scope to the controller where it gets injected. But changes done from controllerA in commonCtrl would not be available in controllerB because commonCtrl gave copy of its scope to the controller who inject it.

Controller A

app.controller('controllerA', function($scope, $controller){
   $controller('commonCtrl', {$scope: $scope}); //inject commonCtrl scope to current scope
   //common scope will be available from here
})

NOTE

If you want changes to be reflected in other controller you could use service with this controller which would share common properties to different controllers.

edited Apr 18, 2015 at 19:39

answered Apr 18, 2015 at 18:36

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

5 Comments

Sankalp Over a year ago

Can you please explain with bit example in ControllerA. It would be more easy. How would I pass dependency from controllerA to commonCtrl. As I am using the same with different service set. One more question would it work if I use to controllers on same page as ControllerA and ControllerB

Sankalp Over a year ago

Would it work separately for both Controllers A and B??

Pankaj Parkar Over a year ago

No it will only give commonCtrl copy to controllerA changes in commonCtrl from controllerA will not available in controllerB, I'll add more info the..Do you want the changes done from controllerA should available in controllerB

Sankalp Over a year ago

No, I think that would be achieve from factory that changes from ControllerA reflects in ControllerB. Am I right?

Pankaj Parkar Over a year ago

@Sankalp Yes you are right, please do look at my updated answer

Collectives™ on Stack Overflow

Combining common function in controllers AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related