ในหลาย ๆ หน้าในโครงการมีการใช้การปนเปื้อนและแต่ละหน้ามีรหัสการปนเปื้อนซ้ำ ๆ มากมาย ดังนั้นฉันจึงเขียนคำสั่งการปนเปื้อนอย่างง่ายเพื่อทำให้รหัสหน้าง่ายขึ้นและง่ายต่อการบำรุงรักษา ฉันเขียนไว้ในบล็อกเป็นสำรองเพื่อให้เข้าถึงได้ง่ายในอนาคต
นี่คือขั้นตอนในการกำหนดคำสั่งและแอปพลิเคชัน:
1. คำสั่งคำสั่ง
กำหนดไฟล์ js, page-directive.js ซึ่งใช้ในการเขียนรหัสคำสั่งเพจ ไฟล์นี้มีเทมเพลตเพจ ต่อไปนี้เป็นรหัสทั้งหมดในไฟล์ JS:
'ใช้อย่างเข้มงวด'; (ฟังก์ชั่น () {angular.module ('เทมเพลต/pageinit/pageinit.html', []). run (['$ templatecache', ฟังก์ชั่น ($ templatecache) {$ templatecache.put ('template/pageinit/pageinit.html' ng-class = "{ปิดการใช้งาน: pagedata.currentPage == 1}">/n '+' <a href = "JavaScript: void (0);" '<a href = "javascript: void (0);" ng-click = "on_prev ()"> <span> </pan> </a>/n'+ '</li>/n'+ ' หน้า == pagedata.totalpage} ">/n '+' <a ng-if =" หน้า! =/'.../' "href =" JavaScript: void (0); "ng-class ="/'bg-custom/': page == pagedata.currentpage }} </a>/n '+' <a ng-if = "page ==/'.../'" href = "javascript: void (0);" ng-class = "/'bg-custom/'/'pageTa.currentPage}" ng-class = "{disabled: pagedata.currentPage == pagedata.totalpage}">/n '+' <a href = "javascript: void (0);" ng-click = "on_next ()" placeholder = "" ng-model = "inpage">/n '+' <อินพุต type = "ปุ่ม" value = "bump" ng-click = "on_loadpage (inpage)"> </div>/n '+' </li>/n '+' <li> <a href = "#" {{pagedata.count}} </span> </a> </li>/n '+' </ul>/n '+');}]); 'ae', templateurl: ฟังก์ชั่น (telement, tattrs) {return tattrs.templateurl || pageinittemplate.getPath (); if (scope.prev) {scope.prev ()}}; }};}}; }). การโทร (หน้าต่าง);2. การควบคุมสไตล์การแบ่งหน้า
ขอแนะนำให้เขียนในไฟล์. css แยกต่างหาก ขั้นแรกให้สร้างไฟล์ pagesync.css ใหม่ ต่อไปนี้เป็นสไตล์ที่เฉพาะเจาะจง
.pagination-main {display: inline-block; Padding-Left: 0; มาร์จิ้น: 0 0; แนวชายแดน: 4px; แนวตั้ง-จัดตำแหน่ง: middle;}. pagination main li.prev-page> a {border: 0;}. pagination-main li.next-page> a {border: 0; ชายแดนซ้าย: 1px; ระยะขอบซ้าย: 0;}. pagination-main li.first-page> a {ชายแดนด้านซ้าย-ซ้าย-ราดอุดิ: 0; ชายแดนด้านล่างซ้าย-ราดอุดิอัส: 0;}. การแบ่งหน้าหลัก li.last-page> a {ชายแดนด้านขวา-ขวา-ขวา: 0; ขอบล่าง-ขวา-ขวา: 0;}. pagination-main li div {ความกว้าง: 80px; border: 1px solid #dddddd; พื้นหลัง-สี: #ffffff; float: ซ้าย; center;}. pagination-main li.skip-page อินพุต [type = 'ปุ่ม'] {padding: 0 4px 1px 10px; ชายแดน: 0; ชายแดนซ้าย: 1px ของแข็ง #DDDDDD; พื้นหลัง-สี: #FFFFFF} .PAGINATION ระยะขอบซ้าย: 0;}. pagination-main> li {display: inline;}. pagination-main> li: เด็กแรก> a, .pagination-main> li: เด็กแรก> span { /*margin-left: 0; ชายแดนด้านซ้าย-ซ้าย-Radius: 4px; ชายแดนด้านล่างซ้าย-ราดเดอัส: .active> a, .pagination-main> .active> span, .pagination-main> .active> a: hover, .pagination-main> .active> span: hover, .pagination-main> .active> a: โฟกัส. สี: #FFF; เคอร์เซอร์: ค่าเริ่มต้น; พื้นหลังสี: #428BCA; สีชายแดน: #428bca;}. การแบ่งหน้า-หลัก> li> a, .pagination-main> li> span {ตำแหน่ง: ญาติ; ลอย: ซ้าย; /*pagination: 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: โฟกัส, .pagination main> .disabled> a, .pagination> .disabled>. เคอร์เซอร์: ไม่ได้รับอนุญาต; พื้นหลังสี: #FFF; สีชายแดน: #DDD;}3. วิธีการสืบค้นการปนเปื้อน
ฉันได้ปรับแต่งวิธีการสืบค้นการปนเปื้อนในโรงงานซึ่งใช้ร่วมกันและสะดวกสำหรับการบำรุงรักษารหัส การโต้ตอบกับพื้นหลังในเชิงมุมนั้นเป็นแบบอะซิงโครนัสโดยค่าเริ่มต้น ฉันเขียนมันเป็นแบบสอบถามแบบซิงโครนัสที่นี่ ก่อนอื่นกำหนดไฟล์ JS PASSYNC.Service.js ต่อไปนี้เป็นเนื้อหาทั้งหมดของโรงงาน:
'ใช้อย่างเข้มงวด'; Angular.module ('App'). Factory ('Pagesync', ['$ http', '$ q', หน้าฟังก์ชัน ($ http, $ q) {var rowcollectionPage = []; var totalPage = 1; pages var {RowCollectionPage: [], TotalPage: 1, CurrentPage: CurrentPage? endpage = TotalPage; json.pages = หน้า; มิฉะนั้นจะมีการบันทึกไว้ว่าเป็นสถานะที่บันทึกไว้ (var i = 1; i <totalPage+1; i ++) {temp.push (i); TotalPage]; อุณหภูมิกลับ; Temp.push (Rowarr [i])} สำหรับ (var j = 0; j <pageize - rowarr.length; PAGESIZE) {VAR ADERRED = $ Q.DEFER (); '& currentPage +' + ' + หน้า; LoadPage: ฟังก์ชั่น (URL, CurrentPage, PageSize, หน้า) {var deferred = $ q.defer ();4. ใช้คำสั่ง
1). รหัสในหน้า:
ในรหัสของฉันหน้านี้เขียนไว้ใน tfoot ในตาราง Prev (), next () และ loadpage (หน้า) เป็นวิธีทั้งหมดที่กำหนดไว้ในคอนโทรลเลอร์ที่สอดคล้องกันของหน้า
<table> <thead> <tr> <th> หมายเลขซีเรียล </th> <th> ชื่อคอลัมน์ 1 </th> <th> ชื่อคอลัมน์ 2 </th> <th> การดำเนินการ </th> </tr> </thead> <tbody> <tr ng-if = "! $ index+1+(pagedata.currentPage-1)*PAGESIZE: ''}} </td> <td> {{row.args1}} </td> <td> {{row.args2}} </td> <td> center; "> <a href = '#'> แก้ไข </a> </td> </tr> <tr ng-if =" notabledata "ng-repeat =" ข้อมูลใน pagedata.rowcollectionPage "> <td ng-if =" index == 0 "colspan =" 4 " </td> <td ng-if = "$ index! = 0" colspan = "4"> </td> </tr> </tbody> <tfoot> <tr> <td style = "text-allign: center;" colspan = "6"> <div> <page-init page-data = "pagedata" prev = "prev ()" next = "next ()" load-page = "loadpage (หน้า)"> </page-init> </div> </td> </td>2). รหัสในคอนโทรลเลอร์
ก่อนอื่นคุณต้องอ้างอิงโรงงานและการอ้างอิง pagesync ในคอนโทรลเลอร์ดังต่อไปนี้:
Angular.Module ('App'). คอนโทรลเลอร์ ('myctrl', ฟังก์ชัน (pagesync) {});
ก่อนที่จะมีการสืบค้นการปนเปื้อนคุณต้องเตรียมการบางอย่าง:
// pagedata ตั้งค่าชุดข้อมูลหน้าจำนวนหน้าทั้งหมดชุดหมายเลขหน้าและจำนวนข้อมูลทั้งหมด LoadTime เป็นพารามิเตอร์ที่กำหนดเองเพื่อบันทึกสถานะเวลา (ก่อนที่จะเข้าถึงข้อมูลและหลังจากส่งคืนข้อมูล)
$ scope.pagedata = {rowCollectionPage: [], TotalPage: 1, CurrentPage: 1, หน้า: [], นับ: 0, LoadTime: 'ก่อน'};
// สิ่งนี้ใช้ในการคำนวณความสูงของตารางตามสถานการณ์จริง
$ scope.tabheight = $ scope.height-48-37-10-42-5;
// คำนวณจำนวนข้อมูลจำนวนเท่าใดในหน้าจริง
$ scope.pagesize = parseInt (($ scope.tabheight-15-34-34-39)/34);
จากนั้นเขียนวิธีการต่อไปนี้ในคอนโทรลเลอร์
// การสืบค้น pagination $ spope.load = function (แถว) {$ scope.surgeonpagedata.rowCollectionPage = Common.setPagerow ([], $ scope.pagesize); $ scope.nosurgeondata = false; $ scope.surgeonpagedata.loadtime = 'ก่อน'; pagesync.load (url, $ scope.pagedata.currentpage, $ scope.pagesize). จากนั้น (ฟังก์ชั่น (ข้อมูล) {$ scope.pagedata = data; if (($ scope.pagedata.loadtime == 'หลังจาก' && $ scope.page.count == 0) | = true;}});}; // หน้าถัดไป $ scope.next = function () {if ($ scope.pagedata.currentPage <$ scope.pagedata.totalpage) {pagesync.next (url, $ scope.pagedata.currentpage - }}; // หน้าก่อนหน้า $ scope.prev = function () {ถ้า ($ scope.pagedata.currentPage> 1) {pagesync.prev (url, $ scope.pagedata.currentPage, $ scope.pagesize) }}; // คลิกที่หมายเลขหน้าเพื่อข้าม $ scope.loadPage = ฟังก์ชั่น (หน้า) {$ scope.inpage = undefined; var intpage; if (typeof page == 'string') {if (page! = "") {intPage = parseInt (หน้า, 10); } else {intPage = 0; }} else {intPage = page; } if ($ scope.pagedata.totalpage <= 1) {} อื่นถ้า (intpage == undefined || intpage == null) {Alert ('โปรดกรอกหมายเลขหน้ากระโดด!'); } อื่นถ้า (intpage <= 0 || intpage> $ scope.pagedata.totalpage) {แจ้งเตือน ('หมายเลขหน้ากระโดดควรมากกว่า 0 น้อยกว่าจำนวนหน้าทั้งหมด'+$ spope.pagedata.totalpage); } อื่นถ้า ($ spope.pagedata.currentPage! = หน้า) {pagesync.loadPage (url, $ scope.pagedata.currentPage, $ scope.pagesize, หน้า). then (ฟังก์ชั่น (ข้อมูล) {$ scope.page.pagedata = ข้อมูล;}); -5. ผลลัพธ์
ผลการดำเนินการขั้นสุดท้ายมีดังนี้:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น