Javascript Angular.js共享控制器方法

我正在开发一个CMS，我最初使用的是Knockout，但我决定尝试Angular，因为它更喜欢它的功能。在CMS中，其中一个部分是“用户”。它有一个表，允许单击标题对数据进行排序。控制器如下所示：

userControllers.controller('UserListControl', ['$scope', 'User',
    function($scope, User) {
        $scope.users = User.query();

        $scope.columns = [
            { 'field': 'last', 'label': 'Last Name' },
            { 'field': 'first', 'label': 'First Name' },
            { 'field': 'username', 'label': 'Username' },
            { 'field': 'email', 'label': 'Email' },
        ];
        $scope.orderProp = 'last';
        $scope.orderDirection = false;
        $scope.tableSort = function(field) {
            if ($scope.orderProp === field) {
                $scope.orderDirection = !$scope.orderDirection;
            }
            $scope.orderProp = field;
        };
        $scope.tableSortClass = function(field) {
            if ($scope.orderProp === field) {
                if ($scope.orderDirection) {
                    return 'sortDesc';
                }
                return 'sortAsc';
            }
        };
    }]);

这是我创建的adminApp的一部分。由于还有其他部分也将使用表排序属性（orderProp、orderDirection）和方法（tableSort、tableSortClass），我是否可以放置这些方法，以便最终的recordsController也可以访问它们

好的，所以我尝试使用服务和工厂函数来创建它。这对我来说都是全新的，所以我不完全确定我在做什么，但以下是我所拥有的：

adminServices.factory('TableSort', [
    function() {
        var orderProp = 'id';
        var orderDirection = false;

        function sort(field) {
            alert('test');
            if (orderProp === field) {
                orderDirection = !orderDirection;
            }
            orderProp = field;
        }

        function sortClass(field) {
            if (orderProp === field) {
                if (orderDirection) {
                    return 'sortDesc';
                }
                return 'sortAsc';
            }
        }
    }]);

---

我希望在我的html中使用类似ng click=“TableSort.sort（field）”的东西来访问它们，但它现在不起作用。

您可以使用服务或工厂来保存这些常用方法。此外，您可以使用

$rootScope

创建一个服务，并将所有这些属性和方法放入其中。下面是一个相同的示例：

userControllers.service('UserListControl', function() {
    var orderProp = 'last';
    var orderDirection = false;
    return {
       tableSort : function(field) {
        if (orderProp === field) {
            orderDirection = !orderDirection;
        }
        orderProp = field;
    };
      tableSortClass: function(field) {
        if (orderProp === field) {
            if (orderDirection) {
                return 'sortDesc';
            }
            return 'sortAsc';
        }
    };
   }
});

---

正如上面在其他文章中所述，您可以创建一个服务，您可以将其注入到各种控制器中以“共享”代码

下面是一个完整的示例：

myApp.service('myService', function myService() {
    return {
        someVar: "Value",
        augmentName: function(name){
            return "Sir " + name;
        }
    }
});

第一件是服务。我已经定义了一个“myService”，并给它一个函数“augmentName”，现在您可以注入myService并访问augmentName函数

myApp.controller('testCtrl', function ($scope, myService) {

    $scope.testFunction = function(name){
      console.log(myFunction.someVar); //This will access the service created variable
      return myService.augmentName(name);
    }
}

控制器注入服务，然后在其一个函数内调用它

现在，如果您使用“testCtrl”定义了ng控制器，或者将testCtrl作为路由器中的控制器，那么HTML代码应该可以访问控制器

现在可以调用ng model=“testFunction（someName）”，它将按预期进行解析

希望有帮助。如果你想让我深入一点，请告诉我

如果您仍在试图了解angular中的所有内容是如何工作的，那么教程在我开始时帮助我分配了资源。我建议捐出一个小时左右来玩它

---

另外，我强烈建议您尽早尝试，这将迫使您使用angular“angular way”，并真正帮助您正确设置项目。

您可以使用服务来完成这项工作。查看angular services（）和Directions（），了解如何隔离和重用逻辑。您的排序逻辑可以拉入服务并注入任何控制器。任何常见的DOM操作都可以作为指令重用。祝你好运。你也可以将它们添加到父级

$scope

，甚至

$rootScope

。我在问题中添加了更多内容。我正在尝试使用具有工厂功能的服务。这和你正在做的有什么区别？另外，我想把它应用到我的整个应用程序中，而不仅仅是用户控制器。好的，我了解这里的大部分内容。要返回实际变量，是否应返回variableName:variable？我编辑了代码以在服务中包含一个变量。因此，在过去，我需要一些可以跨多个控制器访问的变量，因此，您可以像在服务中定义函数一样定义变量，而不是使用全局变量。然后，您可以通过注入的服务访问它们。您也可以将变量包装在setters中的getters中，这可能是一个很好的实践，但我只是将变量添加到服务中。