การเลียนแบบ timepicker เชิงมุมเพื่อสร้างการควบคุมอินพุตสำหรับนาทีวินาที

ในโครงการจำเป็นต้องมีการควบคุมในการป้อนนาทีและวินาที แต่หลังจากตรวจสอบโครงการโอเพ่นซอร์สบางโครงการไม่พบการควบคุมที่เหมาะสม มี timepicker ควบคุมที่คล้ายกันใน ui bootstrap เชิงมุม แต่มันไม่ได้ลึกลงไปในไม่กี่นาทีและวินาทีที่แม่นยำ

ดังนั้นจึงมีการตัดสินใจที่จะอ้างถึงซอร์สโค้ดและนำไปใช้ด้วยตัวเอง

เอฟเฟกต์สุดท้ายมีดังนี้:

ประการแรกคือคำจำกัดความของคำสั่ง:

 app.directive ('minuteecondpicker', function () {return {จำกัด : 'ea', ต้องการ: ['minuteecondpicker', '?^ngmodel'], คอนโทรลเลอร์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, ctrls) {var mingeecondpickerctrl = ctrls [0], ngmodelctrl = ctrls [1];

ในฟังก์ชั่นลิงค์ด้านบน Ctrls เป็นอาร์เรย์: Ctrls [0] เป็นอินสแตนซ์คอนโทรลเลอร์ที่กำหนดไว้ในคำสั่งนี้และ Ctrls [1] คือ ngmodelctrl นั่นคืออินสแตนซ์คอนโทรลเลอร์ที่สอดคล้องกับ NG-model คำสั่งนี้ถูกกำหนดโดยต้องการ: ['minuteecondpicker', '?^ngmodel']

โปรดทราบว่า การพึ่งพาครั้งแรกคือชื่อของคำสั่งตัวเองและอินสแตนซ์ที่เกี่ยวข้องที่ประกาศโดยคอนโทรลเลอร์ในคำสั่งจะถูกส่งผ่านการพึ่งพาที่สองถูกเขียนแปลก ๆ : "?^ngmodel" ความหมายของ? คือแม้ว่าจะไม่พบการพึ่งพา แต่อย่าโยนข้อยกเว้นนั่นคือการพึ่งพาเป็นตัวเลือกทางเลือก ความหมายของ ^ คือการค้นหาตัวควบคุมขององค์ประกอบหลัก

จากนั้นกำหนดการตั้งค่าเริ่มต้นบางอย่างที่ใช้ในคำสั่งนี้และนำไปใช้ผ่านคำสั่งคงที่:

 app.constant ('minutesecondpickerconfig', {minutestep: 1, secondstep: 1, readonlyInput: false, mousewheel: true});

ถัดไปเป็นตัวควบคุมที่สอดคล้องกันซึ่งประกาศดังนี้:

 app.controller ('minutesecondpickercontroller', ['$ scope', '$ attrs', '$ parse', 'MinthsecondPickerConfig', ฟังก์ชั่น ($ scope, $ attrs, $ parse, MinthsecondPickerConfig) {... }];

ในฟังก์ชัน Directive Link วิธีการเริ่มต้นของคอนโทรลเลอร์นี้เรียกว่า:

 this.init = function (ngmodelctrl_, อินพุต) {ngmodelctrl = ngmodelctrl_; ngmodelctrl. $ render = this.render; var minuteInputel = inputs.eq (0), secondSinputel = inputs.eq (1); var mousewheel = angular.isdefined ($ attrs.mousewheel)? $ SCOPE. $ PARTER. $ eval ($ attrs.mousewheel): MinthsecondPickerConfig.mousewheel; if (Mousewheel) {this.setupmousewheelevents (MountsInputel, SecondSinputel); } $ scope.readonlyInput = Angular.isdefined ($ attrs.readonlyInput)? $ SCOPE. $ PARTATE $ EVERAL ($ attrs.ReadOnlyInput): MINETECONDPICKERCONFIG.ReadOnLyInput; this.SetUpInputEvents (MOINTIENPUTEL, SecondSinputel); -

พารามิเตอร์ที่สองที่ได้รับการยอมรับจากวิธีการเริ่มต้นคืออินพุตและหนึ่งที่ผ่านในฟังก์ชั่นลิงค์คือ: element.find ('อินพุต') ดังนั้นกล่องอินพุตแรกจะใช้ในการป้อนนาทีและกล่องอินพุตที่สองใช้เพื่อป้อนวินาที

จากนั้นตรวจสอบว่าแอตทริบิวต์ Mousewheel ถูกเขียนทับหรือไม่ หากไม่มีการเขียนทับให้ใช้ชุด Mousewheel เริ่มต้นเป็นค่าคงที่และทำการตั้งค่าที่เกี่ยวข้องดังนี้:

 // ตอบสนองบน mousewheel spin this.setupmousewheelevents = function (minuteInputel, secondSinputel) {var isscrollingup = function (e) {ถ้า (e.originalevent) {e = e.originalevent; } // เลือกตัวแปรเดลต้าที่ถูกต้องขึ้นอยู่กับเหตุการณ์ var delta = (e.wheeldata)? E. wheeldata: -e.deltay; return (e.detail || delta> 0); - MountesInputel.bind ('Mousewheel Wheel', ฟังก์ชั่น (e) {$ scope. $ ใช้ ((isscrollingup (e))? $ scope.incrementminutes (): $ scope.decrementminutes ()); e.preventDefault ();}); secondsInputel.bind ('Mousewheel Wheel', ฟังก์ชั่น (e) {$ scope. $ ใช้ ((isscrollingup (e))? $ scope.incrementeconds (): $ scope.decrementeconds ()); e.preventDefault ();}); -

ในที่สุดวิธีการเริ่มต้นจะทำการตั้งค่าบางอย่างสำหรับอินพุตเอง:

 // ตอบสนองบนอินพุตโดยตรง this.setUpinputEvents = function (MinuteInputel, SecondSinputel) {ถ้า ($ spope.readonlyInput) {$ scope.UpDateMinutes = Angular.noop; $ scope.updateseconds = Angular.noop; กลับ; } var invalidate = function (invalidMinutes, invalidSeconds) {ngmodelctrl. $ setViewValue (null); ngmodelctrl. $ setValidity ('เวลา', เท็จ); $ scope.validity = false; if (angular.isdefined (InvalidMinutes)) {$ spope.invalidMinutes = invalidMinutes; } if (angular.isdefined (invalidSeconds)) {$ scope.invalidSeconds = invalidSeconds; - $ scope.updateMinutes = function () {var minute = getMinutesFromTemplate (); if (angular.isdefined (นาที)) {selected.minutes = นาที; รีเฟรช ('M'); } else {ไม่ถูกต้อง (จริง); }}; MountesInputel.bind ('เบลอ', ฟังก์ชั่น (e) {ถ้า (! $ scope.invalidminutes && $ scope.minutes <10) {$ scope. $ ใช้ (ฟังก์ชั่น () {$ scope.minutes = pad ($ scope.minutes);});}}); $ scope.updateseconds = function () {var seconds = getSecondSfromTemplate (); if (angular.isdefined (วินาที)) {selected.seconds = วินาที; รีเฟรช ('s'); } else {ไม่ถูกต้อง (ไม่ได้กำหนด, จริง); - secondsInputel.bind ('เบลอ', ฟังก์ชั่น (e) {ถ้า (! $ scope.invalidseconds && $ scope.seconds <10) {$ scope. $ ใช้ (ฟังก์ชั่น () {$ scope.seconds = pad ($ scope.seconds); -

ในวิธีนี้ฟังก์ชั่นที่ไม่ถูกต้องจะถูกประกาศสำหรับการตั้งค่าอินพุตที่ผิดกฎหมายซึ่งแสดงให้เห็นถึงความถูกต้อง = คุณสมบัติเท็จในขอบเขตเพื่อให้หน้ามีโอกาสตอบสนองอย่างเหมาะสม

หากผู้ใช้ใช้ตัวแปรเพื่อแสดง minutestep หรือ secondstep ดังนั้นผู้เฝ้าดูที่เกี่ยวข้องจะต้องตั้งค่า:

 var minutestep = minuteecondpickerconfig.minutestep; if ($ attrs.minutestep) {$ scope.parent. $ watch ($ parse ($ attrs.minutestep), ฟังก์ชั่น (ค่า) {minutestep = parseint (ค่า, 10);}); } var secondstep = minuteecondpickerconfig.secondstep; if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondstep), ฟังก์ชั่น (ค่า) {secondstep = parseint (ค่า, 10);}); -

รหัสการใช้งานคำสั่งที่สมบูรณ์มีดังนี้:

 var app = angular.module ("minuteecondpickerdemo"); app.directive ('minuteecondpicker', ฟังก์ชั่น () {return {จำกัด : 'ea', ต้องการ: ['Minthousecondpicker', '?^ngmodel'], controller: 'partials/directives/minutesecondpicker.html', ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attrs, ctrls) {var minthousecondpickerctrl = ctrls [0], ngmodelctrl = ctrls [1]; element.find ('input'));}}}}};}); app.constant ('minthesecondpickerconfig', {minutestep: 1, secondstep: 1, readonlyInput: false, mousewheel: '$' 'MINETECONDPICKERCONFIG', ฟังก์ชั่น ($ SCOPE, $ ATTRS, $ PARSE, MINETECONDPICKERCONFIG) {VAR SELECTION = {นาที: 0, วินาที: 0}, NGMODELCTRL = {$ setViewValue: Angular.noop}; ngmodelctrl_; if (Mousewheel) {this.setupmousewheelevents (MinutesInputel, SecondSinputel); SecondSinputel);}; if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondstep), ฟังก์ชั่น (ค่า) {secondstep = parseint (ค่า, 10);}); if (E.OriginalEvent) {E = E.OriginalEvent; $ scope. $ appli (issclolingup (e))? $ scope.incrementminutes (): $ scope.decrementminutes ()); $ decrementeconds ()); = ฟังก์ชั่น (InvalidMinutes, InvalidSeconds) {ngmodelctrl. $ setViewValue (null); if (angular.isdefined (invalidseconds)) {$ scope.invalidseconds = invalidseconds; ไม่เป็นจริง (จริง);}}; seconds = getsecondsfromtemplate (); 10) {$ scope. $ applem () {$ scope.seconds = pad ($ scope.seconds);}); ngmodelctrl. $ modelvalue.seconds}: null; Math.floor (totalseconds / 60), วินาที: totalseconds % 60}; วินาที: Selection.seconds}); Selection.minutes, seconds = selection.seconds; } ฟังก์ชั่น getMinutesFromTemplate () {var minkes = parseint ($ scope.minutes, 10); } $ scope.incrementminutes = function () {addseconds (minutestep * 60); addseconds (-secondstep); $ scope.previewtime = ฟังก์ชั่น (นาที, วินาที) {var totalseconds = parseint (นาที, 10) * 60 + parseint (วินาที, 10), hh = pad (math.floor (totalseconds / 3600), mm = pad (นาที 60)

การใช้งานเทมเพลตที่เกี่ยวข้อง:

 <body> <tbody> <tr> <td> <a ng-click = "uprementMinutes ()"> <span> </span> </a> </td> <td> </td> <td> <a ng-click = "เพิ่มขึ้น ng-class = "{'has-error': invalidMinutes}"> <อินพุตประเภท = "ข้อความ" ng-model = "นาที" ng-change = "updateMinutes ()" ng-mousewheel = "เพิ่มขึ้น <td> td>" td> </td ng-class = "{'has-error': invalidSeconds}"> <อินพุตประเภท = "ข้อความ" ng-model = "วินาที" ng-change = "updateseconds ()" ng-mousewheel = "td> <td! ng-show = "ความถูกต้อง"> {{previewtime (นาที, วินาที)}} </pan> </td> </tr> <tr> <td> <a ng-click = "decrementminutes ()"> <span> </span> </a> </td> <td> <td> <td> </a> </td> <td> </td> </tr> </tbody> </table>

รหัสทดสอบ (เช่นซอร์สโค้ดของกล่องโต้ตอบที่ใช้ในภาพหน้าจอก่อนหน้า):

 <div> <h3> ไฮไลต์บน <span> {{moviename}} </span> </h3> </div> <div> <div> <div> <div id = "ไฮไลต์-เริ่มต้น"> <h4> เวลาเริ่มต้น: </h4> <นาทีวินาที id = "ไฮไลต์-เอนด์"> <h4> เวลาสิ้นสุด: </h4> <นาทีวินาที-ตัวเลือก ng-model = "endtime" ความถูกต้อง = "endtimevalidity"> </นาทีวินาที-picker> </div> </div> <div> <div> Addable: 'true'} "> </tags> </div> </div> </div> <div> <button ng-click =" ok () "ng-disabled ="! startTimeValidity ||! DURATIONINCORRECT (EndTime, StartTime) "> OK </button> <button ng-click =" Cancel () "> ยกเลิก </duct> </div>

หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:

การสอนการเรียนรู้ bootstrap

การสอนการใช้งาน Bootstrap

การสอนการใช้งานปลั๊กอิน bootstrap

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น