AngularJS – move repeating functions from controller to service

Issue

Hi I’m pretty new at angular JS and i’m trying to refactor my controller and want to move repeating multisort function as a service and call it back in the controller.

Can someone help me in converting this below function as a service as it has all $scope and I know it can’t be used in the service or factory:

$scope.multiSort = function(columnName){

            if($scope.orderByField.includes(columnName)){
                if(reverseSortObj[columnName].count == 2){
                    var index = $scope.orderByField.indexOf(columnName)
                    $scope.orderByField.splice(index, 1);
                    delete reverseSortObj.columnName;
                    return;
                }
                var indexToReplace = $scope.orderByField.indexOf(columnName);
                $scope.orderByField[indexToReplace] = '-'+ columnName;
                reverseSortObj[columnName].reverse = !reverseSortObj[columnName].reverse;
                reverseSortObj[columnName].count ++;
            }
            else if($scope.orderByField.includes('-'+ columnName)){
                if(reverseSortObj[columnName].count == 2){
                    var index = $scope.orderByField.indexOf('-' + columnName)
                    $scope.orderByField.splice(index, 1);
                    delete reverseSortObj.columnName;
                    return;
                }
                var indexToReplace = $scope.orderByField.indexOf('-' + columnName);
                $scope.orderByField[indexToReplace] = columnName;
                reverseSortObj[columnName].reverse = !reverseSortObj[columnName].reverse;
                reverseSortObj[columnName].count ++;
            }
            else{
                reverseSortObj[columnName] = {};
                reverseSortObj[columnName].reverse = false;
                reverseSortObj[columnName].count = 1;
                $scope.orderByField.push(columnName);
                
            }
        }

Solution

Create the service and send in your parameter. The following code is untested, but you should get the idea. Send in the objects that you need and do the work. With two variables being modified, I’d recommend returning an object with orderByField and reverseSortObj as its properties since you don’t necessarily want to rely on pass-by-reference. After return, you want to set the modified values to your scope or local variables.

'use strict';

angular.module("myApp").factory('sortService', {
    function multiSort(orderByField, reverseSortObj, columnName) {
        if(orderByField.includes(columnName)){
            if(reverseSortObj[columnName].count == 2){
                var index = orderByField.indexOf(columnName)
                orderByField.splice(index, 1);
                delete reverseSortObj.columnName;
            } else {                
                var indexToReplace = orderByField.indexOf(columnName);
                orderByField[indexToReplace] = '-'+ columnName;
                reverseSortObj[columnName].reverse = !reverseSortObj[columnName].reverse;
                reverseSortObj[columnName].count ++;
            }
        }
        else if(orderByField.includes('-'+ columnName)){
            if(reverseSortObj[columnName].count == 2){
                var index = orderByField.indexOf('-' + columnName)
                orderByField.splice(index, 1);
                delete reverseSortObj.columnName;                    
            } else {
                var indexToReplace = orderByField.indexOf('-' + columnName);
                orderByField[indexToReplace] = columnName;
                reverseSortObj[columnName].reverse = !reverseSortObj[columnName].reverse;
                reverseSortObj[columnName].count ++;
            }
        } else {
            reverseSortObj[columnName] = {};
            reverseSortObj[columnName].reverse = false;
            reverseSortObj[columnName].count = 1;
            orderByField.push(columnName);                
        }
        
        return { orderByField: orderByField, reverseSortObj: reverseSortObj };
    }
        
    return {
        multiSort: multiSort
    };
});


// in controller or directive
var result = sortService.multSort($scope.orderByField, reverseSortObj, columnName);
$scope.orderByField = result.orderByField;
reverseSortObj = result.reverseSortObj;

Answered By – Esaith

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0