AngularJS

Question

嗨，我是 angular JS 的新手，我正在尝试重构我的控制器，并希望将重复的 multisort 函数作为服务移动并在控制器中调用它。

谁能帮我把下面这个函数转换为服务，因为它具有所有 $scope，而且我知道它不能在服务或工厂中使用：

$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);
                
            }
        }

Answer 1

如果不想改代码，可以直接将$scope传给服务，获取as scope

下面是一个工作示例，已根据您的要求进行了简化。

(function(){
 var app = angular.module('App', []);
 
 app.controller('AppController', ['$scope', 'AppService', function($scope, AppService){
  $scope.text = 'Hello World';
  $scope.columns = ['a', 'c', 'b'];
  $scope.sorted = AppService.sort($scope);
  
  console.log($scope.sorted);
  
 }]);
 
 
 app.service('AppService', [function(){
 
 var service = {};
 
 service.sort = function(scope){
 
   return scope.columns.sort();
 }
 
 return service;
 
 }]);
 
 
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="App">
  <div ng-controller="AppController">{{text}}</div>
</div>

Answer 2

创建服务并发送您的参数。以下代码未经测试，但您应该明白了。发送您需要的对象并完成工作。修改两个变量后，我建议 returning 一个对象，将 orderByField 和 reverseSortObj 作为其属性，因为您不一定要依赖按引用传递。在 return 之后，您想将修改后的值设置为您的作用域或局部变量。

'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;

AngularJS - 将重复功能从控制器移至服务

AngularJS - move repeating functions from controller to service

javascript