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

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?

dpz1983
dpz1983 是的..我正在使用angularjs
5 年多之前 回复
dongzhimin2231
dongzhimin2231 我猜你的意思是angular.js
5 年多之前 回复
duanjian3920
duanjian3920 在这里,在差异页面中有不同的表格中没有列。所以我可以使用指令吗?
5 年多之前 回复
douzhimei8259
douzhimei8259 创建可重用的指令。
5 年多之前 回复

2个回答



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

http://jsbin.com/madapaqoso/1/ 编辑 </ p>

  app.factory(“toolService”,function(){
return {
checkUncheck:function(listItem){
listItem.selected = [];
}
}
});
</ code> </ pre>

我没有添加你的功能增加的复杂性,但你明白了。< / p>

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

展开原文

原文

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.

douyiqi9640
douyiqi9640 是的...我已经写了一般指令..
5 年多之前 回复



我编写了一个自定义指令</ p>

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

在HTML中,</ p>

 &lt; check-uncheck&gt;&lt; / check-uncheck&gt; 
</ code> </ p re>

现在,我可以与项目中的大部分表视图共享checkUncheck函数。</ p>
</ div>

展开原文

原文

I have written a custom directive

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 = [];
                }
            };
        }
    };
});

In HTML,

<check-uncheck></check-uncheck>

Now I can share checkUncheck function with most of table view in my project.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问