На многих страницах проекта используется страница, и на каждой странице есть много дублирующих кодов страниц. Поэтому я написал простую инструкцию по странице, чтобы упростить код страницы и быть простым в обслуживании. Я написал это в блоге в качестве резервной копии для легкого доступа в будущем.
Вот шаги по определению директивы и ее применения:
1. Директививное определение
Определите файл js, page-greective.js, который используется для написания кода инструкции под пейджингом. Этот файл содержит шаблон пейджинга. Ниже приведены все коды в файле JS:
'Использовать строгое'; (function () {angular.module ('template/pageinit/pageinit.html', []). run (['$ templatecache', function ($ templatecache) {$ templatecache.put ('tempate/pageinit/pageinit.html', '<ul>/n' <+ '< ng-class = "{отключен: pagegata.currentpage == 1}">/n '+' <a href = "javascript: void (0);" ng-click = "on_loadpage (1)" '<a href = "javascript: void (0);" ng-click = "on_prev ()"> <pan> </span> </a>/n'+ '</li>/n'+ '<li ng-repeat = "PageNata.Pages" ng-class = "{/' First-page/': Page =' 1,/'' Page-page/'': 'Late-page/' ':' Late-page/'' ' page == pagegatata.totalpage} ">/n '+' <a ng-if =" page! =/'.../' "href =" javascript: void (0); "ng-class =" {/'bg-custom/': page == pagedata.currentpage} "ng-click =" on_ladtpage (page abdatpage (page) "xrabdpage (page)" }} </a>/n '+' <a ng-if = "page ==/'.../'" href = "javascript: void (0);" ng-class = "{/'bg-custom/': page == pagedata.currentpage}" ng-click = "> {{page}} </a> '/n' '/n' '/n' '/n' ng-class = "{отключен: PageData.currentPage == PageData.totalpage}">/n '+' <a href = "javascript: void (0);" ng-click = Placeholder = "" ng-model = "inpage">/n '+' <input type = "value =" jump "ng-click =" on_loadpage (inpage) "> </div>/n '+' </li>/n '+' <li> <a href ="#"> <pan> '</li>/n'+ '<li> <a href =" {{pageData.count}} </span> </a> </li>/n '+' </ul>/n '+'); 'AE', Templateurl: Function (Telement, Tattrs) {return tattrs.templateurl || if (scope.prev) {scope.prev (); }; };2. Контроль стиля страниц
Рекомендуется написать его в отдельном файле .css. Во -первых, создайте новый файл PageSync.css. Ниже приведен конкретный стиль.
.pagination-Main {Display: Inline Block; Лебь набивки: 0; Полевая: 0 0; граница-радий: 4px; Vertical-Align: Middle;}. Pagination-Main li.prev-page> a {border: 0;}. Pagination-Main li.next-page> a {border: 0; РЕМЖЕР-ЛЕРФ: 1px; Margin-Lefft: 0;}. Pagination-Main li.first-Page> a {Border-top-left-radius: 0; пограничный-левый-радий: 0;}.. М-мэйн li.last-page> a {border-top-right-radius: 0; Бортово-правый-Radius: 0;}. Pagination-Main Li Div {ширина: 80px; граница: 1px solid #ddddddd; фоновый цвет: #ffffff; float: слева; прокладка: 0;}. Center;}. Pagination-Main li.skip-PAGE вход [type = 'button'] {Padding: 0 4px 1px 10px; граница: 0; граница-лето: 1px solid #ddddddd; фоновый цветовод: #ffffff}. Margin-Lefft: 0;}. Pagination-Main> li {Display: inline;}. Pagination-Main> Li: First-Child> A, .Pagination-Main> Li: First-Child> Span { /*Margin-Left: 0; пограничная топ-левая радиус: 4px; пограничный-дно-левый радий: .active> a, .pagination-main> .active> span, .pagination-main> .active> a: Hover, .pagination-main> .active> Span: Hover, .pagination-Main> .Active> A: Focus, .pagination-Main> .Active> A: Focus, .Pagination-Main>. Цвет: #fff; Курсор: по умолчанию; фоновый цвет: #428bca; Пограничный цвет: #428BCA;}.. Парень-майн> li> a, .pagination-main> li> span {position: относительно; Плавание: осталось; /*Парень: 6px 12px;*/ Padding: 1px 8px; Мяглевая маржа: -1PX; Линия-высота: 1.42857143; Цвет: #428BCA; Текстовое декорация: нет; фоновый цвет: #fff; Граница: 1px solid #ddd;}.. Pagination-Main> .disabled> Span: Hover, .pagination-Main> .disabled> Span: Hover, .pagination-Main> .disabled> Span: Focus, .pagination-main> .disabled> a, .pagination-main> .disabled> a: hover, .pagination-main>. Курсор: не прозвенный; фоновый цвет: #fff; Пограничный цвет: #DDD;}3. Метод запроса на страниц
Я настраивал метод запроса на страницу на заводе, который общий и удобный для обслуживания кода. Взаимодействие с фоном в угловом по умолчанию по умолчанию является асинхронным. Я написал это как синхронный запрос здесь. Во -первых, определите JS -файл pageSync.service.js. Ниже приводится все содержание завода:
«Используйте строгое»; angular.module ('app'). Factory ('pageSync', ['$ http', '$ q', страница функции ($ http, $ q) {var rowcollectionpage = []; var totalpage = 1; var pages = [] var endpage = 1; var load = function (url, currentPage, pageSize, desefage) {RowCollectionPage: [], TotalPage: 1, CurrentPage: CurrentPage? = TotalPage; json.pages = pages; Считается, что данные I = 1; (TotalPage - CurrentPage) <= 3) {Temp = [TotalPage - 6, TotalPage - 5, TotalPage - 4, TotalPage - 3, TotalPage - 2, TotalPage - 1, TotalPage]; Таблица в проекте рассчитывается на основе высоты окна браузера и является динамическим // Поскольку страница должна быть фиксирована в нижней части таблицы, используйте пустые строки для данных вместо VAR SetPagerW = Function (RowArr, PageSize) {var Temp = []; (var j = 0; j <pagesize - rowarr.length; j ++) {temp.push ({}); + = ' + CurrentPage +' & ' + PageSize; CurrentPage, PageSize, SEARRED); DEFERED = $ Q.DEFER ();4. Используйте команды
1). Код на странице:
В моем коде страница записана в Tfoot в таблице. Prev (), next () и загрузка (страница) - все методы, определенные в соответствующем контроллере страницы.
<table> <thead> <tr> <th> серийный номер </th> <Th> Имя столбца 1 </th> <Th> имя столбца 2 </th> <Th> операция </th> </tr> </thead> <tbody> <tr ng-if = "! notabledata" ng-repeat = "row in pagedata.rowcollectionpage"> <td> {roud? $ index+1+(pagegatata.currentpage-1)*pagesize: ''}} </td> <td> {{row.args1}} </td> <td> {{row.args2}} </td> <td> {{row.args2}} </td> <td> <td> {row.args2} </td> </td> <td> {{row.args2}} </td> </td> center; "> <a href = '#'> Modify </a> </td> </tr> <tr ng-if =" notabledata "ng-repeat =" Данные в pagegata.rowcollectionPage "> <td ng-if =" $ index == 0 "colspan =" 4 "style-align: center:"> noct Data! </td> <td ng-if = "$ index! = 0" colspan = "4"> </td> </tr> </tbody> <tfoot> <tr> <td style = "text-align: center;" colspan = "6"> <div> <page-init page-data = "pagegata" prev = "prev ()" next = "next ()" load-page = "loadpage (page)"> </page-init> </div> </td> </td> </tr> </tfoot> </table> </td> </td> </tr> </tfoot> </table>2). Код в контроллере
Во -первых, вам необходимо ссылаться на заводскую и справочную PageSync в контроллере следующим образом:
angular.module ('app'). Controller ('myctrl', function (pagesync) {});
Перед запросом на страниц вам нужно сделать некоторую подготовку:
// PageData устанавливает набор данных страницы, общее количество страниц, набор номера страницы и общее количество данных. Время загрузки - это пользовательский параметр для записи статуса времени (до получения доступа к данным и после возвращения данных)
$ scope.pagedata = {rowCollectionPage: [], TotalPage: 1, CurrentPage: 1, страницы: [], count: 0, wime: 'до'};
// Это используется для расчета высоты таблицы в соответствии с фактической ситуацией.
$ scope.tabheight = $ scope.height-48-37-10-42-5;
// Рассчитайте, сколько строк данных на самом деле на странице
$ scope.pagesize = parseint (($ scope.tabheight-15-34-34-39)/34);
Затем напишите следующий метод в контроллере
// странный запрос $ scope.load = function (row) {$ scope.surgeonpagedata.rowcollectionpage = common.setpagerow ([], $ scope.pagesize); $ scope.nosurgeondata = false; $ scope.surgeonpagedata.loadtime = 'до'; PageSync.load (url, $ scope.pagedata.currentpage, $ scope.pagesize) .then (function (data) {$ scope.pagedata = data; if (($ scope.pagedata.loadtime == 'After' && $ scope.pagedata.count == 0) || $ scope.pagedata. $ scope.notabledata = true; $ scope.pagedata = data; }}; // предыдущая страница $ scope.prev = function () {if ($ scope.pagedata.currentpage> 1) {pagesync.prev (url, $ scope.pagedata.currentpage, $ scope.pagesize) .then (function (data) {$ scope.pagedata = data;}; }}; // Нажмите на номер страницы, чтобы прыгнуть $ scope.loadpage = function (page) {$ scope.inpage = undefined; var intpage; if (typeof page == 'string') {if (page! = "") {intpage = parseint (page, 10); } else {intpage = 0; }} else {intpage = page; } if ($ scope.pagedata.totalpage <= 1) {} else if (intpage == undefined || intpage == null) {alert ('Пожалуйста, заполните номер страницы прыжка!'); } else if (intpage <= 0 || intpage> $ scope.pagedata.totalpage) {alert ('номер страницы прыжка должен быть больше 0, меньше, чем общее количество страниц'+$ scope.pagedata.totalpage); } else if ($ scope.pagedata.currentpage! = page) {pageSync.loadpage (url, $ scope.pagedata.currentpage, $ scope.pagesize, page) .then (function (data) {$ scope.pagedata = data;}); }};5. Результаты
Окончательный эффект реализации заключается в следующем:
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.