تقليد الزاوية الزمنية للذاتية لإنشاء عناصر تحكم في المدخلات للدقيقة الثانية

في المشروع ، هناك حاجة إلى عنصر تحكم لدخول دقائق وثواني ، ولكن بعد التحقيق في بعض مشاريع المصادر المفتوحة ، لم يتم العثور على تحكم مناسب. يوجد TimePicker تحكم مماثل في واجهة مستخدم Bootstrap الزاوي ، لكنه لا يعمق في دقائق وثواني دقة.

لذلك ، تقرر الإشارة إلى رمز المصدر وتنفيذها بنفسك.

التأثير النهائي هو على النحو التالي:

الأول هو تعريف التوجيه:

 app.directive ('minuteCondpicker' ، function () {return {rodirerice: 'ea' ، require: ['' minuteCondpicker '،'؟^ngmodel '] الدالة (النطاق ، attrs ، ctrls) {var minoteCondPicktrl = ctrls [0] ، ngmodelctrl = ctrls [1] ؛

في وظيفة الارتباط أعلاه ، CTRLS عبارة عن صفيف: Ctrls [0] هو مثيل وحدة التحكم المحددة في هذا التوجيه ، و Ctrls [1] هو ngmodelctrl ، أي مثيل وحدة التحكم المقابلة لنظام ng. يتم تعريف هذا الترتيب فعليًا من خلال المطلوبة: ['MinuteCondpicker' ، '؟^ngmodel'].

لاحظ أن التبعية الأولى هي اسم التوجيه نفسه ، وسيتم تمرير المثيل المقابل من قِبل وحدة التحكم في التوجيه. يتم كتابة التبعية الثانية إلى حد ما: "؟^ngmodel" ، معنى؟ هو أنه حتى إذا لم يتم العثور على التبعية ، فلا ترمي استثناء ، أي أن التبعية هي خيار اختياري. معنى ^ هو العثور على وحدة تحكم العنصر الأصل.

بعد ذلك ، حدد بعض الإعدادات الافتراضية المستخدمة في هذا التوجيه وتنفيذها من خلال التوجيه المستمر:

 app.constant ('minuteCondPickerConfig' ، {minutestep: 1 ، secondstep: 1 ، readonlyinput: false ، mousewheel: true}) ؛

التالي هو التوجيه المقابل ، والذي يُعلن على النحو التالي:

 App.Controller ('MinuteCondPickerController "، [' $ scope '،' $ attrs '،' $ parse '،' minuteCondPickerConfig '، function ($ scope ، $ attrs ، $ parse ، minotecondpickerconfig) {...}]) ؛

في وظيفة الارتباط التوجيهية ، تسمى طريقة init لوحدة التحكم هذه:

 this.init = function (ngmodelctrl_ ، inputs) {ngmodelctrl = ngmodelctrl_ ؛ ngmodelctrl. $ render = this.render ؛ var minotiNputel = inputs.eq (0) ، secondSinputel = inputs.eq (1) ؛ var mousewheel = Angular.isDefined ($ attrs.mousewheel)؟ $ scope. $ parent. $ eval ($ attrs.mousewheel): minoteCondPickerConfig.mousewheel ؛ if (mousewheel) {this.setUpMouseWheelEvents (minuteInputel ، SewsInputel) ؛ } $ scope.readonlyinput = Angular.isDefined ($ attrs.readonlyinput)؟ $ scope. $ parent. $ eval ($ attrs.readonlyinput): minuteCondPickERCONFIG.ReadonlyInput ؛ this.setupinputevents (minuteInputel ، SewsInputel) ؛ } ؛

المعلمة الثانية المقبولة بواسطة طريقة init هي المدخلات ، والمعلومات التي تم تمريرها في وظيفة الارتباط هي: element.find ('input'). لذلك يتم استخدام مربع الإدخال الأول لدخول الدقائق ، ويتم استخدام مربع الإدخال الثاني لإدخال ثواني.

ثم ، تحقق مما إذا كانت سمة mousewheel قد تم الكتابة عليها. إذا لم يكن هناك مكتوبة فوقها ، فاستخدم Mousewheel الافتراضي في ثابت ، وقم بإجراء الإعدادات ذات الصلة على النحو التالي:

 // الرد على mousewheel تدور هذا. } // اختر متغير دلتا الصحيح اعتمادًا على الحدث var delta = (e.wheeldata)؟ E.wheeldata: -e.deltay ؛ العودة (e.detail || delta> 0) ؛ } ؛ minotiNputel.bind ('mousewheel wheel' ، function (e) {$ scope. $ application ((isscrollingup (e))؟ $ scope.incrementMinutes (): $ scope.decrementMinutes ()) ؛ e.preventdefault () ؛}) ؛ SecondSinputel.bind ('mousewheel wheel' ، function (e) {$ scope. $ application ((isscrollingup (e))؟ $ scope.incrementSeconds (): $ scope.decrementeconds ()) ؛ e.preventDefault () ؛}) ؛ } ؛

ستقوم طريقة init أخيرًا بإعداد بعض الإعدادات للمدخلات نفسها:

 . $ scope.updateseconds = Angular.noop ؛ يعود؛ } var inviridate = function (invalidMinutes ، alvalidseconds) {ngmodelctrl. $ setViewValue (null) ؛ ngmodelctrl. $ setValidity ('time' ، false) ؛ $ scope.validity = false ؛ if (Angular.isDefined (invalidMinutes)) {$ scope.invalidMinutes = invalidMinutes ؛ } if (Angular.isDefined (perialSeConds)) {$ scope.invalidseconds = alerideseconds ؛ }} ؛ $ scope.updateMinutes = function () {var minor = getMinutesFromTemplate () ؛ if (Angular.isDefined (دقائق)) {select.minutes = minutes ؛ تحديث ('m') ؛ } آخر {inviridate (true) ؛ }} ؛ minuteinputel.bind ('Blur' ، function (e) {if (! $ scope.invalidMinutes && $ scope.minutes <10) {$ scope. $ application (function () {$ scope.minutes = pad ($ scope.minutes) ؛}}}}) ؛ $ scope.updateseconds = function () {var seconds = getSecondSfromTemplate () ؛ if (Angular.isDefined (Seconds)) {select.seconds = seconds ؛ تحديث ('s') ؛ } آخر {غير محدد ، صحيح) ؛ }} ؛ SecondSinputel.bind ('Blur' ، function (e) {if (! $ scope.invalidseconds && $ scope.seconds <10) {$ scope. $ application (function () {$ scope.seconds = pad ($ scop.seconds) ؛}) ؛}) ؛}) ؛ } ؛

في هذه الطريقة ، يتم الإعلان عن وظيفة إبطال لإعداد المدخلات غير قانونية ، والتي تعرض صحة = خاصية خاطئة في نطاق لمنح الصفحة فرصة للاستجابة بشكل مناسب.

إذا كان المستخدم يستخدم متغيرًا لتمثيل minutestep أو SecondStep ، فيجب تعيين المراقبين المقابلين:

 var minutestep = minuteCondPickerConfig.minutestep ؛ if ($ attrs.minutestep) {$ scope.parent. $ watch ($ parse ($ attrs.minutestep) ، function (value) {minutestep = parseint (value ، 10) ؛}) ؛ } var secondStep = minoteCondPickerConfig.SecondStep ؛ if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondstep) ، function (value) {secondStep = parseint (value ، 10) ؛}) ؛ }

رمز التنفيذ التوجيهي الكامل كما يلي:

 var app = Angular.module ("minotecondpickerdemo") ؛ app.directive ('minuteCondpicker' ، function () {return {rody: 'ea' ، require: ['' minuteCondpicker '،'؟ 'partials/extralives/minuteCondpicker.html' ، الرابط: الدالة (النطاق ، العنصر ، attrs ، ctrls) {var minotecondpickertl = ctrls [0] ، ngmodelctrl = ctrls [1] ؛ element.find ('input')) ؛ 'minuteCondPickerConfig' ، function ($ scope ، $ attrs ، $ parse ، minotecondpickonfig) {var selection = {minor: 0 ، 0} ، ngmodelctrl = {$ setViewValue: angular.noop} ؛ ngmodelctrl_ إذا (mousewheel) {this.setupmousewheelevents (minuteInputel ، sewssinputel) ؛ this.setupinputevents (minuesinptel ، minoteCondPickerConfig.SecondStep ($ att.secondstep) {$ scope.parent. $ watch ($ parse ( isscrollingup = function (e) {if (e.originalevent) {e = $ scope. $ ((isscrollingup (e))؟ $ scope.decrements () ؛ = وظيفة (invalidminutes ، {ngmodelctrl. $ setViewValue (null) ؛ if (angular.isded (periledseconds) } ؛ getSecondsFromTemplate () if (angular.isded (selections) {select $ scope. ngmodelctrl. $ modelvalue.seconds}: Math.floor (TotalSeconds / 60) select.seconds}) ؛ Seconds.seConds getMinutesfromtemplate () $ scope.increments = functions () {addseconds ( إضافة دالة (SecondedseConds) ؛ $ scope.previewtime = الدالة (الدقائق ،) {var totalseconds = parseint (10)

تنفيذ القالب المقابل:

 <bood> <tbody> <tr> <td> <a ng-click = "gutrementMinutes ()"> </span> </a> </ad> <td> </td> <td> <a ng-click = "stysectioneconds ()"> </span> </a> </td> ng-class = "{'has-error': invalidMinutes}"> <input type = "text" ng-model = "minor" ng-change = "updateminutes () ng-class = "{'has-error': alvalidseconds}"> <input type = "text" ng-model = "selections" ng-change = "addateConds () ng-show = "palidity"> {{PreviewTime (دقائق ، ثواني)}}} </span> </td> </tr> <tr> <td> <a ng-click = "deldminutes ()"> <span> </ana> </a> </td> </td> <sd> <a ng-click = </a> </td> <td> </td> </r> </tbody> </table>

رمز الاختبار (أي الكود المصدري لحوار الحوار المأخوذة في لقطة الشاشة السابقة):

 <div> <h3> تسليط الضوء على <span> {{moviename}} </span> </h3> </viv> <viv> <viv> <div id = "gightly-start"> <h4> وقت البدء: </h4> <minute-second-picker ng-model = "starttime" palidity = "starttimevalidity" <h4> وقت النهاية: </h4> <دقيقة ثانية-قذرة ng-model = "Endtime" palidity = "EndtimeValidity"> </minute-second-picker> </viv> </viv> <viv> <viv> العلامات: </div> <div> <div> <divs model = "src" src = s s.name s in sourcet: ' ) startTime) "> موافق </button> <button ng click =" cancel () "> إلغاء </button> </viv>

إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:

Bootstrap التعلم البرنامج التعليمي

Bootstrap البرنامج التعليمي العملي

تعليمي استخدام المكونات الإضافية Bootstrap

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.