javascript - angular新手求教怎么把controller里的功能分离出来？-PHP中文网问答

我在做几个简单的表格相关的页面，基本也就和示例文档里的那些表格数据绑定差不多，但是因为用到了分页，所以之前就在controller里写了几个分页相关的方法，大概下面这个意思：

var app = angular.module('myApp', []);

app.controller('tableController',function($scope,getHttpJson){
    //...一些获取数据的代码...
    $scope.pageConfig = {
        itemNum: data.TableData.length,
        numPerPage: 5
    }
    $scope.pagination($scope.pageConfig);
    $scope.pagination = function(pageSetting){//分页初始化
        var itemNum = pageSetting.itemNum;
        var numPerPage = pageSetting.numPerPage;
        
        $scope.pageNum = Math.ceil(itemNum/numPerPage);
        $scope.pageList= [];
        for(var i=1,len = $scope.pageNum;i<=len;i++){
            $scope.pageList.push(i);
        }
        $scope.curPage = 1;
        $scope.getPageItems();
    }
    $scope.getPageItems = function(){//...}//获取当前页内数据
    $scope.chanPageNum = function(){//...}//切换页码
}

然而分页功能肯定是几个页面要复用的，应该要单独封装出来吧。可我现在试了很久也不知道该用什么方法把它们从controller里分离出去，因为这几个方法里都用到了$scope。试过用directive，然后把需要的$scope里的值用scope:{value:'='}这样绑定，但是link的方法里scope.value就是undefined，是我用的不对吗？

第一次用angular，可能这个问题有点白痴，我不知道是不是我写jquery太久了，感觉看了很久的书和文章都搞不太懂angular的模块化该怎么理解Q-Q，现在感觉好混乱。factoryservicedirective都应该什么场景下使用Q-Q？（我的问题本质应该是因为没理解这个吧…）

能回答的话非常感谢Q-Q

.directive("gPagination", [function () { return { template:'pagination.html', restrict: 'E', replace: true, link: function ($scope, elem, attrs) { } } }])` pagination.html

<p> <pagination ng-model="pagination.pageIndex" total-items="pagination.totalItems" max-size="5" ng-change="pageChanged()" items-per-page="pagination.pageSize" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="«" last-text="»" class="pagination" boundary-links="true" rotate="false"></pagination> </p>',

全部回复(3)

ringa_lee2017-04-11 12:04:04 3楼

把分页写在directive或者factory里面，把分页的一些初始化配置（每页分页的条数写成自定义html指令），然后获取数据的时候，把数据总条数，自定义的东西一起传过来，再用双向数据绑定，渲染到视图上。
`app

<p>
    <pagination ng-model="pagination.pageIndex" total-items="pagination.totalItems" max-size="5"
                ng-change="pageChanged()" items-per-page="pagination.pageSize" previous-text="&lsaquo;"
                next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" class="pagination" boundary-links="true"
                rotate="false"></pagination>
</p>',


在controler里先注入directive,就能在项目内使用分页啦

 $scope.pageChanged = function () {
            $scope.option.pageIndex = $scope.pagination.pageIndex;
            getList();//获取数据信息
        }

赞 +0

添加回复

高洛峰2017-04-11 12:04:04 2楼

多用directive，你会发现写多了angular很多代码都在diective和service里面。

伊谢尔伦2017-04-11 12:04:04 1楼

封装一个服务里面，然后在controller依赖这个服务就可以了。