angularjs封装分页指令

唐生洗发用飘柔

于 2021-01-11 20:38:49 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： angularjs js css

本文链接：https://blog.youkuaiyun.com/lys1925/article/details/112490811

笔记专栏收录该内容

3 篇文章

订阅专栏

博客主要介绍了在AngularJS中封装分页指令tmPagination的步骤，包括新建pagination.html、pagination.less和tmpagination.js文件，还提及了在app.js中注入该指令的相关内容，涉及到JS和CSS技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.封装分页指令tmPagination;

a.新建pagination.html，文件内容如下：
在这里插入图片描述
b.新建pagination.less，文件内容如下：

c.新建tmpagination.js，文件内容如下：
在这里插入图片描述

2.app.js注入指令如下（`import tmPagination from './static/scripts/diredctive/tmPagination /tmPagination .js'` 和 `.directive('tmPagination ',tmPagination` ) ）

import angular from 'angular'
import 'oclazyload'
import uirouter from 'angular-ui-router'
import uiBootstrap from 'angular-ui-bootstrap'
import debounce from './static/scripts/factory/debounce.js'
import headerDev from './static/scripts/diredctive/headerDev.js'
import tmPagination from './static/scripts/diredctive/tmPagination /tmPagination .js'
import slidemenuDev from './static/scripts/diredctive/slidemenuDev.js'
import routing from './router.js' //路由
import indexCtrl from  './static/components/index/indexCtrl.js' //主页
import netWork from  './static/components/index/netWork.js' //网络
import commonService from  './static/service/commonService.js' //网络
window.app = angular.module('myProject',['uirouter','uiBootstrap','oclazyload'])
    .config(routing)
    .run(['$rootScope',function($rootScope){
        $rootScope.$on('$stateChangeSuccess',function(event,toState){
            $rootScope.$broadcast('to-menu', {state: toState.name})
        })
    }])
    .service('commonService',commonService)
    .directive('headerDev',headerDev)
     .directive('tmPagination ',tmPagination )
    .directive('slidemenuDev',slidemenuDev)
    .controller('indexCtrl',indexCtrl)
    .controller('netWork',netWork)
    .factory('debounce',['$timeout','$q',debounce])
export default app