Question

我正在使用我最初使用Knockout的CMS，但我决定尝试使用Angular，因为它更像是它的功能。在CMS中，其中一个部分将是＆＃39; Users＆＃39;。它有一个表，允许单击标题以对数据进行排序。控制器如下：

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 =＆＃34; TableSort.sort（field）＆＃34;但它现在不起作用。

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）”，它将按预期解析。

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

如果您仍在尝试弄清楚角度中的所有内容是如何运作的，angular phone cat教程帮助我在开始时分配。我建议捐一个小时左右玩它。

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

Angular.js共享控制器方法

3 个答案: