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

准备工作:

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

(2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....

首先抛出几个问题:

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

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

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

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

pagedir.html(指令页面模板)

<div>

 <button class="btn btn-info" type="button" ng-click="setPage(3)">Set current page to: 3</button>

 <h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>

 <uib-pagination class="pagination-sm" 分页函数="" ng-change="pageChanged()" 是否将当前页显示在中间="" rotate="true" 是否显示首页,和末页的数字="" boundary-link-numbers="true" 是否显示“.....”这几个点="" force-ellipses="true" 显示页码的页码tabs数量(不包含首页,末页)="" max-size="maxSize" 当前页="" ng-model="bigCurrentPage" 每页显示的数据条数=""     ="" items-per-page="pageSize" 总的数据记录数="" total-items="bigTotalItems"      =""> </uib-pagination>

 <pre>Page: {{bigCurrentPage}}/{{numPages}}</pre> 

</div>

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

<p>this is page dir</p>

<pagedir ng-click="getCurPage()" currentpage="currentpage" data="dataPage"> </pagedir> 

对应的控制器: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,"========================================");

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

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

  }

 }]);

});  

最终页面的显示效果

顺便给出路由的配置

.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的属性吗?)

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

(0)

相关推荐

  • angularjs使用directive实现分页组件的示例

    闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页 依赖项: fontawesome,bootstrap html: <ul class="page clearfix"> <li ng-hide="currentPage <= 1"> <a href="" ng-click=" rel="external nofollow"

  • Angular2自定义分页组件

    在项目中,前端传给后台的参数有: pageSize:每页的条数 pageNo:当前页码 比如当前是第1页,每页20条,则后台返回第1页的20条记录(sql应该是用limit去获取分页数据) 同时,后台接口还会返回列表的总条数totalNum,前端根据totaNum/pageSize计算总共有多少页 如图: 注意事项: 需要先配置好路由(Angular2路由与导航) 使用步骤: (1)在项目中引入分页组件 // app.module.ts import { BrowserModule } from

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

    准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css.... 首先抛出几个问题: a):何时回用到分页 (当后端返回的数据过多,一页装不满时,我们必须要采取分页的效果,给用户良好的视觉效果) b):分页一般要传递哪些数据 (总的数据数量,每页固定显示多少条数据,当点击分页时候返回当前的页码.......这三条是必须的) 第一步:先完成指令的封装 我会

  • Vue.js分页组件实现:diVuePagination的使用详解

    一.介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.创建初始化项目 这里不在详细说明,我们的分页演示只需要vue和vue-router就可以了,我们直接构建项目和设置配置. main.js:

  • 基于原生ajax与封装的ajax使用方法(详解)

    当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'); var app=express(); //app.set('view',path.jo

  • 原生js封装的一些jquery方法(详解)

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl

  • 为Jquery EasyUI 组件加上清除功能的方法(详解)

    1.背景 在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框).DateBox(日期输入框).DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择.不允许手动输入,这时只要在组件选项中加入 editable:false 就可以实现,但有一个问题,就是:一旦选择了,没办法清空.经过研究,可以用一个变通的解决方案:给组件加上一个"清除"按钮,当有值是,显示按钮,点击按钮可清空值,当无值是,隐藏按钮. 2.函数定义 定义JS

  • vue组件之间的数据传递方法详解

    (1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

  • angular组件间传值测试的方法详解

    前言 我们知道angular组件间通讯有多种方法,其中最常用的一种方法就是借助于 @Input 和 @Output 进行通讯.具体如何通讯请参考angular组件间通讯,本文不再赘述,我们来讲讲关于此方法如何进行单元测试. 创建假组件 我们单元测试父组件与子组件的的交互是否符合我们的要求,我们在父组件进行测试,就需要模拟一个假的子组件出来,这样排除其他因素对测试的影响. 比如现在我在分页组件里写了一个每页大小选择组件,现在要测试一下组件间交互.现在分页组件就是我们的父组件,每页大小组件就是我们的

  • Android实现Activity、Service与Broadcaster三大组件之间互相调用的方法详解

    本文实例讲述了Android实现Activity.Service与Broadcaster三大组件之间互相调用的方法.分享给大家供大家参考,具体如下: 我们研究两个问题, 1.Service如何通过Broadcaster更改activity的一个TextView. (研究这个问题,考虑到Service从服务器端获得消息之后,将msg返回给activity) 2.Activity如何通过Binder调用Service的一个方法. (研究这个问题,考虑到与服务器端交互的动作,打包至Service,Ac

  • Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解

    本文实例讲述了Python面向对象程序设计中类的定义.实例化.封装及私有变量/方法.分享给大家供大家参考,具体如下: 1. 定义类 python中定义一个类的格式如下: class MyClass(object): def __init__(self,data1,data2): self.__data1=data1 self.data2=data2 def __func1(self): print("MyClass类的私有方法被调用!") def print_data(self): s

  • Python封装原理与实现方法详解

    本文实例讲述了Python封装原理与实现方法.分享给大家供大家参考,具体如下: [封装] 隐藏对象的属性和实现细节,仅对外提供公共访问方式. [好处] 1. 将变化隔离: 2. 便于使用: 3. 提高复用性: 4. 提高安全性: [封装原则] 1. 将不需要对外提供的内容都隐藏起来: 2. 把属性都隐藏,提供公共方法对其访问. 私有变量和私有方法 在python中用双下划线开头的方式将属性隐藏起来(设置成私有的) 私有变量 #其实这仅仅这是一种变形操作 #类中所有双下划线开头的名称如__x都会自

随机推荐