Dalam sebuah proyek, diperlukan kontrol untuk memasuki menit dan detik, tetapi setelah menyelidiki beberapa proyek open source, tidak ada kontrol yang cocok ditemukan. Ada timePicker kontrol yang serupa di UI Bootstrap Angular, tetapi tidak masuk ke dalam beberapa menit dan presisi detik.
Oleh karena itu, diputuskan untuk merujuk pada kode sumbernya dan mengimplementasikannya sendiri.
Efek terakhir adalah sebagai berikut:
Pertama adalah definisi arahan:
app.directive ('MinutesCondPicker', function () {return {batasi: 'ea', membutuhkan: ['MinutesCondPicker', '?^Ngmodel'], pengontrol: 'MinutesCondPickerController', REPLACE: TRUE, LINGKUP: {Validitas: '='}, Templateurl: 'Partials, Partials, {Validitas:' = '}, Templateurl:' Partials, 'MISTIFRE/MISTIVERS:' = '}, TemplateRl:' Partial 'Partiels/Minume,' elemen, attrs, ctrls) {var menitecondpickerCtrl = ctrls [0], ngModelctrl = ctrls [1];Dalam fungsi tautan di atas, Ctrls adalah array: Ctrls [0] adalah instance pengontrol yang didefinisikan pada arahan ini, dan Ctrls [1] adalah ngModelctrl, yaitu, instance controller yang sesuai dengan model NG. Pesanan ini sebenarnya didefinisikan oleh membutuhkan: ['Minutesondpicker', '?^Ngmodel'].
Perhatikan bahwa ketergantungan pertama adalah nama arahan itu sendiri, dan contoh yang sesuai dinyatakan oleh pengontrol dalam arahan akan diteruskan. Ketergantungan kedua ditulis agak aneh: "?^Ngmodel", arti? adalah bahwa bahkan jika ketergantungan tidak ditemukan, jangan melempar pengecualian, yaitu, ketergantungan adalah opsi opsional. Arti ^ adalah untuk menemukan pengontrol elemen induk.
Kemudian, tentukan beberapa pengaturan default yang digunakan dalam arahan ini dan mengimplementasikannya melalui Petunjuk Konstan:
app.constant ('MinutesondPickerConfig', {minutestep: 1, SecondSep: 1, ReadOnlyInput: false, mousewheel: true});Berikutnya adalah pengontrol yang sesuai arahan, yang dinyatakan sebagai berikut:
app.controller ('MinutesCondPickerController', ['$ scope', '$ attrs', '$ parse', 'MinutesCondPickerConfig', function ($ scope, $ attrs, $ parse, menitecondpickerconfig) {...}]);Dalam fungsi Link Directive, metode init dari pengontrol ini disebut:
this.init = function (ngModelctrl_, input) {ngModelctrl = ngModelctrl_; ngmodelctrl. $ render = this.render; var menitInputel = inputs.eq (0), SecondSInputel = inputs.eq (1); var mousewheel = angular.isdefined ($ attrs.mousewheel)? $ scope. $ parent. $ eval ($ attrs.mousewheel): MinutesCondPickerConfig.mousewheel; if (mousewheel) {this.setupmouseWheelevents (MinutesInputel, SecondSInputel); } $ scope.readOnlyInput = angular.isdefined ($ attrs.readOnlyInput)? $ scope. $ parent. $ eval ($ attrs.readOnlyInput): MinutesCondPickerConfig.readOnlyInput; this.setupInputEvents (MinutesInputel, SecondSInputel); };Parameter kedua yang diterima dengan metode init adalah input, dan yang dilewatkan dalam fungsi tautan adalah: element.find ('input'). Jadi kotak input pertama digunakan untuk memasuki menit, dan kotak input kedua digunakan untuk memasukkan detik.
Kemudian, periksa apakah atribut mousewheel ditimpa. Jika tidak ada yang ditimpa, gunakan mousewheel default yang diatur secara konstan, dan buat pengaturan yang relevan sebagai berikut:
// Tanggapi pada mousewheel spin this.setupmouseWheelevents = function (MinutesInputel, SecondSInputel) {var isScrollingup = function (e) {if (e.originalEvent) {e = e.originalEvent; } // Pilih variabel delta yang benar tergantung pada peristiwa var delta = (e.wheeldata)? E.wheeldata: -e.deltay; return (e.detail || delta> 0); }; MinutesInputel.bind ('Mousewheel Wheel', Function (e) {$ scope. $ apply ((isScrollingup (e))? $ scope.crementminutes (): $ scope.decrementminutes ()); e.preventDefault ();}); SecondSInputel.bind ('Mousewheel Wheel', Function (e) {$ scope. $ apply ((isScrollingup (e))? $ scope.crementseconds (): $ scope.decrementseconds ()); e.preventDefault ();}); };Metode init akhirnya akan membuat beberapa pengaturan untuk input itu sendiri:
// Tanggapi input langsung this.setupInputEvents = function (MinutesInputel, SecondSInputel) {if ($ scope.readOnlyInput) {$ scope.upDateMinutes = angular.noop; $ scope.updateseconds = angular.noop; kembali; } var invalidate = fungsi (invalidminutes, invalidSeconds) {ngModelctrl. $ setViewValue (null); ngmodelctrl. $ setValidity ('time', false); $ scope.validity = false; if (angular.isdefined (tidak validminutes)) {$ scope.invalidminutes = tidak validminutes; } if (angular.isdefined (InvalidSeconds)) {$ scope.invalidSeconds = InvalidSeconds; }}; $ scope.upDateMinutes = function () {var menit = getMinutesFromTemplate (); if (angular.isdefined (menit)) {terpilih.minutes = menit; Refresh ('M'); } else {Invalidate (true); }}; MinutesInputel.bind ('blur', function (e) {if (! $ scope.invalidminutes && $ scope.minutes <10) {$ scope. $ apply (function () {$ scope.minutes = pad ($ scope.minutes);});}}); $ scope.updateseconds = function () {var detik = getSecondSfromTemplate (); if (angular.isdefined (detik)) {selected.seconds = detik; Refresh ('S'); } else {Invalidate (tidak terdefinisi, benar); }}; SecondSInputel.bind ('blur', function (e) {if (! $ scope.invalidseconds && $ scope.seconds <10) {$ scope. $ apply (function () {$ scope.seconds = pad ($ scope.seconds);});}}); };Dalam metode ini, fungsi Invalidate dinyatakan untuk mengatur input ilegal, yang memperlihatkan validitas = properti palsu dalam ruang lingkup untuk memberikan halaman kesempatan untuk merespons dengan tepat.
Jika pengguna menggunakan variabel untuk mewakili minutestep atau detik, maka pengamat yang sesuai harus diatur:
var minutestep = menitecondpickerconfig.minutestep; if ($ attrs.minutestep) {$ scope.parent. $ watch ($ parse ($ attrs.minutestep), function (value) {minutestep = parseInt (value, 10);}); } var secondSep = MinutesCondPickerConfig.secondStep; if ($ attrs.secondStep) {$ scope.parent. $ watch ($ parse ($ attrs.secondStep), function (value) {secondSep = parseInt (value, 10);}); }Kode implementasi arahan lengkap adalah sebagai berikut:
var app = angular.module("minuteSecondPickerDemo");app.directive('minuteSecondPicker', function() { return { restrict: 'EA', require: ['minuteSecondPicker', '?^ngModel'], controller: 'minuteSecondPickerController', replace: true, scope: { validity: '=' }, templateUrl: 'Partials/Directive/MinutesCondPicker.html', Link: Function (SCOPE, ELEMENT, ATRS, CTRLS) {var MinutesCondPickerCtrl = Ctrls [0], ngModelctrl = ctrlser [1]; element.find ('input'));}}}}};}); app.constant ('MinutesCondPickerConfig', {Minutestep: 1, SecondStep: 1, ReadOnlyInput: '$ Parse', '$', '$ scondpicker', '$', '$ scondpicker', $ scondpicker ', $ mouseWheel', 'approller', 'mousewheel'); 'MinutesCondPickerConfig', function ($ scope, $ attrs, $ parse, menitecondpickerconfig) {var dipilih = {menit: 0, detik: 0}, ngModelctrl = {$ setViewValue: angular.noop}; Ngmodelctrl_; Minutescondpickerconfig.mousewheel; MinumCondpickerConfig.readonlyInput; 10); function (MinutesInputel, SecondSInpen) {var isscrollingup = function (e) {if (e.originalEvent) {e = E.OriginalEvent} // Pilih variabel delta yang benar tergantung pada acara var delta = (e.wheeldata); MinutesInputel.Bind ('Mousewheel Wheel', Function (E) {$ scope. $ Apply ((isScrollingup (e))? $ scope.incrementminutes (): $ scope.decrementminutes ()); e.preventdefault ();}); $ SCOPE. APPLIKE (ISSCROLLINGUP (E))? $ SCOPE.INCREMENTSCONDS (): $ SCOPE.DECREMENTSECONDS ()); $ scope.updateminutes = angular.noop; ifule.isdefined (Invalidminutes)) {$ scope.invalidMinute = InvalidMinutes; getMinutesFromTemplate (); $ SCOPE. APPLIKE () {$ scope.minutes = PAD ($ scope.minute);}); Invalidate (tidak terdefinisi, benar); this.render = function () {var Time = ngModelctrl. $ ModelValue? ife.seconds <0) {time.seconds = 0; Model ini valid refresh (keyboardchange) {makevalid (); true; PAD); detik = ParseInt ($ scope.seconds, 10); 60); {Newseconds = 0; 3600)), mm = pad (menit % 60), ss = pad (detik);Implementasi template yang sesuai:
<table> <tbody> <tr> <td> <a ng-click="incrementMinutes()"> <span></span> </a> </td> <td></td> <td> <a ng-click="incrementSeconds()"> <span></span> </a> </td> <td></td> </tr> <tr> <td ng-class = "{'have-error': Invalidminutes}"> <input type = "text" ng-model = "menit" ng-change = "updateMinutes ()" ng-mousewheel = "incrementminutes ()" "ng-readonly =" readonlyinput "maxlength =" 3 " ng-class = "{'have-error': InvalidSeconds}"> <input type = "text" ng-model = "detik" ng-change = "updateConds ()" ng-mousewheel = "span-PAND / 2! ng-show = "validitas"> {{previewtime (menit, detik)}} </span> </td> </tr> <tr> <td> <a ng-klik = "decrementminutes ()"> <span> </span> </a> </td> <td> <td> <pan> <pan> </a) </tdres </td </td = "</san" </a " </a> </td> <td> </td> </tr> </tbody> </able>Kode uji (mis. Kode sumber dialog yang diambil di tangkapan layar sebelumnya):
<div> <h3>Highlight on <span>{{ movieName }}</span></h3></div><div> <div> <div id="highlight-start"> <h4>Start Time:</h4> <minute-second-picker ng-model="startTime" validity="startTimeValidity"></minute-second-picker> </div> <div id="highlight-end"> <h4> Waktu akhir: </h4> <menit detik-picker ng-model = "endtime" validitas = "endtimevalidity"> </menit detik-picker> </div> </div> <v> div> tag: </div> <div> <tags model = "tag" src = "s. } "> </tags> </div> </div> </div> <div> <tombol ng-click =" ok () "ng-disabled ="! startTimevalidity ||! endTimevalidity || Durasi Incorrect (EndTime, StartTime) "> ok </button> <tombol ng-click =" cancel () "> Batal </button> </div>Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.