将angular-ui的分页组件封装成指令的方法详解

准备工作：

为张北等地区用户提供了全套网页设计制作服务，及张北网站建设行业解决方案。主营业务为成都网站设计、成都网站建设、张北网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

（1）一如既往的我还是使用了requireJS进行js代码的编译

（2）必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....

首先抛出几个问题：

a）:何时回用到分页 (当后端返回的数据过多，一页装不满时，我们必须要采取分页的效果，给用户良好的视觉效果)

b）:分页一般要传递哪些数据（总的数据数量，每页固定显示多少条数据，当点击分页时候返回当前的页码.......这三条是必须的）

第一步：先完成指令的封装

我会在 js/directives/pagedir 此文件下完成指令的编写

pagedir.html(指令页面模板)



 

 rotate defaulted to true and force-ellipses set to true:

  

 Page: {{bigCurrentPage}}/{{numPages}}

pagedir.js（指令的操作js）

define(['app'],function(myapp){

 myapp.directive("pagedir",[function(){

  return{

    templateUrl:"js/directives/pagedir/pagedir.html",//指令的模板页面

    restrict:'AE',

    scope:{

     data:'=',   //用于获取页面控制器传回来的数据（例如：总得记录数，每页显示的数量等....）

     currentpage:'=', //返回当前页给页面控制器

    },

    link:function(s,el,attrs){

     

    },

    controller:['$scope','$log',function($scope,$log){

     $scope.bigTotalItems=$scope.data.bigTotalItems;

     $scope.pageSize=$scope.data.pageSize;

     $scope.bigCurrentPage=$scope.data.bigCurrentPage;

     $scope.numPages=$scope.data.numPages;

     $scope.maxSize=$scope.data.maxSize;

     $scope.setPage = function (pageNo) {//用于设置回到指定页

      $scope.bigCurrentPage = pageNo;

      console.log( $scope.bigCurrentPage);

     };

     $scope.pageChanged = function() {//用于返回当前页

      $log.log('Page changed to: ' + $scope.bigCurrentPage);

      console.log($scope.bigCurrentPage);

      $scope.currentpage=$scope.bigCurrentPage;//赋值，准备传给页面控制器，用于接口的取值

     };

    }],

  }

 }]);

});

第二步：明确使用地方

我打算在test.html页面上使用分页的功能（你可以在各个有多条数据现实的页面使用分页）

test.html

this is page dir

对应的控制器：idea_test_ctrl

define(['app','directives/pagedir/pagedir'],function(myapp){

 myapp.controller("idea_test_ctrl",['$scope',function($scope){

  $scope.dataPage={ //用于分页的数据

   maxSize:5,     //显示五个页码按钮（不包括第一条，和最后一条）

   bigTotalItems:50,   //总的记录数（一般来源于接口的返回数据）

   bigCurrentPage:1,  //当前页码

   pageSize:5,    //每页显示的数据数量

   numPages:50/5,   //共有多少页

  };

  $scope.getCurPage=function(){

   console.log($scope.currentpage,"========================================");

   //接下来的调用后台接口，返回数据

   //...........................一系列的后续操作

  }

 }]);

});

最终页面的显示效果

将angular-ui的分页组件封装成指令的方法详解

顺便给出路由的配置

.state('home.ideas.test', {

    url: '/test',

    views: {

     "part": {

      templateUrl: 'tpls/ideas/test.html',

      controller:"idea_test_ctrl"

     }

    }

 })

总结一下：封装此指令的难点(假如你已经了解怎么使用angualr的指令了)

1>：如何双向传值的问题（在页面控制器设置的数值传递到分页模块控制器，以及每次点击分页怎么样将页码传回页面控制器用于调用接口的传参）　

一点分享：link链接方法与指令的controller有啥关系（貌似都可以进行数据的操作）指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为，但链接函数只能在当前内部指令中定义行为，且无法在指令间复用.link函数可以将指令互相隔离开来，而controller则定义可复用的行为。（指令是可以嵌套的，还记得我们指令中有一个require的属性吗？）

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对创新互联的支持。

分享名称：将angular-ui的分页组件封装成指令的方法详解
文章来源：http://cqcxhl.com/article/jssodd.html

重庆分公司，新征程启航

将angular-ui的分页组件封装成指令的方法详解

其他资讯