时间戳

首页 > 解决方案 > AngularJS - 将重复功能从控制器移动到服务

javascript - AngularJS - 将重复功能从控制器移动到服务

问题描述

嗨，我是 Angular JS 的新手，我正在尝试重构我的控制器，并希望将重复的多排序功能作为服务移动并在控制器中调用它。

有人可以帮助我将以下功能转换为服务，因为它具有所有 $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);
                
            }
        }

标签： javascriptangularjs

解决方案

如果不想更改代码，可以直接将 $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>

推荐阅读