Question

我正在编写一些函数用于检查/取消选中表列表的所有内容，它正常工作，

控制器是，

    invoiceApp.controller('itemController', ['$scope', 'itemService', '$route', function ($scope, itemService, $route) {
$scope.checkAllItem;
        $scope.listItem = {
            selected: []
        };
        $scope.checkUncheck = function () {
            if ($scope.checkAllItem) {
                $scope.listItem.selected = $scope.items.map(function (item) {
                    return item.id;
                });
            } else {
                $scope.listItem.selected = [];
            }
        };

HTML TABLE，

   <table id="dt_basic" class="table table-bordered table-hover" width="100%">
                    <thead>                         
                        <tr>
                            <th class="text-center" width="5%">
                                <input type="checkbox" name="checkbox-inline" ng-model="checkAllItem" ng-click="checkUncheck()">
                                <input type="checkbox" name="checkbox-inline" ng-click="uncheckAll()">
                            </th>
                            <th width="15%" ng-click="sort()">Name<a href="javascript:void(0)"><i class="fa fa-sort small"></i></a></th>
                            <th width="65%">Description</th>
                            <th width="5%">Unit</th>
                            <th width="10%">Rate</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in items" data-toggle="modal" data-target="#itemModel" ng-click="getItem(item.id)" style="cursor: pointer"> 
                            <td class="text-center">
                                <input type="checkbox" checklist-model="listItem.selected" checklist-value="item.id">
                            </td>
                            <td><a>{{item.name}}</a></td>
                            <td>{{item.description}}</td>
                            <td>{{item.unit}}</td>
                            <td>{{item.rate}}</td>
                        </tr>
                    </tbody>
                </table>

它工作正常，我的问题是，在我的项目中，我在不同的页面中有很多表，我必须复制过去这个相同的代码（仅限于控制器）到处。有什么方法可以编写它吗？

我试过$routescope，但它不能与ng-model一起使用，是否有任何方法可以实现相同的功能？

Answer 1

您可以将其转换为服务，然后将服务注入任何需要它的控制器。您现在还可以包含用于操纵数据的其他常用函数。参见

http://jsbin.com/madapaqoso/1/edit

app.factory("toolService", function(){
        return {
           checkUncheck: function(listItem) {
               listItem.selected = [];
           }
        }
});

我没有添加你的功能增加的复杂性，但你明白了。

或者，使用指令。我也在jsbin中显示它。虽然，我更喜欢服务，因为服务用于管理数据和指令更关注DOM编辑和绑定$ watchers /事件等。或者你可以使用服务持久化数据，然后使用自定义指令处理所有点击表格。

Answer 2

我写了一个自定义指令

invoiceApp.directive('checkUncheck', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<input type="checkbox" name="checkbox-inline" ng-model="checkAllItem" ng-click="checkUncheck()">',
        link: function (scope) {
            //check/uncheck and delete 
            scope.checkAllItem;
            scope.listItem = {
                selected: []
            };
            scope.checkUncheck = function () {
                if (scope.checkAllItem) {
                    scope.listItem.selected = scope.items.map(function (item) {
                        return item.id;
                    });
                } else {
                    scope.listItem.selected = [];
                }
            };
        }
    };
});

在HTML中，

<check-uncheck></check-uncheck>

现在，我可以与项目中的大部分表视图共享checkUncheck函数。

我应该在angular.js中写下通用控制器函数？

2 个答案: