Angular.js共享控制器方法

Question

我正在使用我最初使用Knockout的CMS，但我决定尝试使用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';
            }
        }
    }]);

我希望使用像ng-click =“TableSort.sort（field）”之类的东西在我的html中访问它们，但它现在不能正常工作。

Answer 1

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

Answer 2

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

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

Answer 3

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

以下是一个完整的例子：

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

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

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-controller，或者您已将testCtrl作为路由器中的控制器，那么您的HTML代码应该可以访问控制器。

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

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

如果你仍然想弄清楚角度中的所有东西是如何工作的那么，当我开始时，有角度的手机猫教程帮我分配了。 我建议捐一个小时左右玩它。

此外，我强烈建议尽早使用自耕农/角度生成器进行实验 ，这将迫使您使用角度“角度方式”，并且可以真正帮助您正确设置项目。