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

Question

I am writing some functions for check/uncheck all for table list and it is working fine,

Controller is,

    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>

It is working fine,Here my problem is,In my project I have many tables in different pages,I have to copy past this same code (Talking about Controller only ) to everywhere.Is there any method to write it generally?

I tried with $routescope, but It is not working with ng-model,Is there any method to implement the same?

Answer 1

You could turn it into a service then inject the service to whichever controller needs it. You can now also include other commonly used functions used to manipulate data in those. See,

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

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

I didn't add the added complexity of your function, but you get the idea.

Alternatively, use a directive. I show it in the jsbin as well. Though, I'd prefer a service since services are made for managing data and directives are more concerned with DOM editing and binding $watchers/events etc. Or perhaps you could persist the data with a service, then use a custom directive to handle all the clicks on the table.