В проекте требуется контроль для ввода минут и секунд, но после изучения некоторых проектов с открытым исходным кодом не найдено подходящего контроля. В Angular Bootstrap есть аналогичный временный таймпляр, но он не уходит глубоко в минуты и точность секунд.
Поэтому решается обратиться к его исходному коду и реализовать его самостоятельно.
Окончательный эффект заключается в следующем:
Во -первых, это определение директивы:
App.Directive ('MiniteCondPicker', function () {return {RESTRICT: 'ea', reft: ['MiniteCondpicker', '?^ngmodel'], контроллер: 'MiniteCondPickerController', Заменить: True, Scope: {Validity: '='}, TemplateUrl: 'partials/Distivives/MinteCondpicker. Элемент, ATTRS, CTRLS) {var MineCondPickerCtrl = ctrls [0], ngmodelctrl = ctrls [1];В приведенной выше функции ссылки CTRLS является массивом: CTRLS [0] является экземпляром контроллера, определенным в этой директиве, а CTRLS [1] является ngmodelctrl, то есть экземпляр контроллера, соответствующий NG-модели. Этот заказ на самом деле определяется по требованию: ['MiniteCondPicker', '?^Ngmodel'].
Обратите внимание, что первая зависимость - это имя самой директивы, а соответствующий экземпляр, объявленный контроллером в директиве, будет передана. Вторая зависимость написана немного странной: «?^Ngmodel», значение? Это даже если зависимость не найдена, не бросайте исключение, то есть зависимость является необязательным вариантом. Значение ^ - найти контроллер родительского элемента.
Затем определите некоторые настройки по умолчанию, используемые в этой директиве, и реализуйте их с помощью постоянной директивы:
app.constant ('MiniteCondPickerConfig', {minutestep: 1, Secondstep: 1, readonlyinput: false, mousewheel: true});Следующим является директива, соответствующая контроллеру, которая объявляется следующим образом:
app.controller ('MiniteCondPickerController', ['$ scope', '$ attrs', '$ parse', 'minitecondpickerconfig', function ($ scope, $ attrs, $ parse, minitecondpickerconfig) {...}]);В функции директивной ссылки метод этого контроллера называется:
this.init = function (ngmodelctrl_, inputs) {ngmodelctrl = ngmodelctrl_; ngmodelctrl. $ render = this.render; var minotsinputel = inputs.eq (0), secondpitel = inputs.eq (1); var mousewheel = angular.isdefined ($ attrs.mousewheel)? $ scope. $ parent. $ eval ($ attrs.mousewheel): minitecondpickerconfig.mousewheel; if (mousewheel) {this.setupmousewheelevents (miniteinputel, secondpitel); } $ scope.readonlyinput = angular.isdefined ($ attrs.readonlyinput)? $ scope. $ parent. $ eval ($ attrs.readonlyinput): minitecondpickerconfig.readonlyinput; this.setupinputevents (MiniteInputel, Secondputel); };Вторым параметром, принятым методом init, является входы, а одним из них передается в функции ссылки: element.find ('input'). Таким образом, первое окно ввода используется для ввода минут, а второе окно ввода используется для ввода секунд.
Затем проверьте, перезаписан ли атрибут мышиного колеса. Если нет перезаписано, используйте мышиное колесо по умолчанию, установленное постоянным, и сделайте соответствующие настройки следующим образом:
// Отвечать на мышиное колесо Spin This.SetUpmouseWheElevents = function (miniteInputel, secondputel) {var issscollingup = function (e) {if (e.originalevent) {e = e.originaleventvent; } // Выберите правильную переменную дельта в зависимости от события var delta = (e.wheeldata)? e.wheeldata: -e.deltay; return (e.detail || delta> 0); }; miniteinputel.bind ('колесо мышиного колеса, функция (e) {$ scope. $ Apply (((isscollingup (e))? secondpinputel.bind ('Колесо мышиного колеса, функция (e) {$ scope. $ применить ((isscollingup (e))? };Метод init, наконец, сделает несколько настроек для самого входов:
// отвечать при прямом входе $ scope.updatesconds = angular.noop; возвращаться; } var Invalidate = function (InvalidMinutes, Invalidseconds) {ngmodelctrl. $ setViewValue (null); ngmodelctrl. $ setVality ('time', false); $ scope.vality = false; if (angular.isdefined (Invalidminutes)) {$ scope.invalidminutes = Invalidminutes; } if (angular.isdefined (Invalidseconds)) {$ scope.invalidseconds = vingalidseconds; }}; $ scope.updateminutes = function () {var minots = getMinutesFromTemplate (); if (angular.isdefined (минуты)) {selected.minutes = минуты; обновить ('m'); } else {Invalidate (true); }}; miniteinputel.bind ('blur', function (e) {if (! $ scope.invalidminutes && $ scope.minutes <10) {$ scope. $ Apply (function () {$ scope.minutes = pad ($ scope.minutes);});}}); $ scope.updateseconds = function () {var seconds = getSecondsFromTemplate (); if (angular.isdefined (seconds)) {selected.seconds = seconds; обновить ('s'); } else {Invalidate (undefined, true); }}; secondsinputel.bind ('blur', function (e) {if (! $ scope.invalidseconds && $ scope.seconds <10) {$ scope. $ Apply (function () {$ scope.seconds = pad ($ scope.seconds);});}}); };В этом методе функция недействительной объявляется для установки входного входа незаконным, что раскрывает достоверность = ложное свойство в объеме, чтобы дать странице возможность ответить надлежащим образом.
Если пользователь использует переменную для представления Minutestep или Secondstep, то необходимо установить соответствующие наблюдатели:
var minutestep = minitecondpickerconfig.minutestep; if ($ attrs.minutestep) {$ scope.parent. $ watch ($ parse ($ attrs.minutestep), function (value) {minutestep = parseint (значение, 10);}); } var secondstep = minitecondpickerconfig.secondstep; if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondstep), function (value) {secondstep = parseint (value, 10);}); }Полный код реализации директивы заключается в следующем:
var app = angular.module ("MiniteCondPickerDemo"); App.Directive ('MiniteCondPicker', function () {return {ограничить: 'ea', require: ['intoecondPicker', '? 'Partials/Directives/MinteCondPicker.html', ссылка: функция (сфера, элемент, атрис, Ctrls) {var MiniteCondPickerCtrl = ctrls [0], ngmodelctrl = ctrls [1]; element.find ('input')); 'MiniteCondPickerConfig', функция ($ actope, $ attrs, $ parse, minitecondpickerconfig) {var selected = {minots: 0, секунды: 0}, ngmodelctrl = {$ setViewVale: angular.noop}; ngmodelctrl_; if (Mouseweel) {this.setupmousewheelevents (miniteinputel, secondputel); секунда); if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondstep), функция (значение) {secondstep = parseint (значение, 10);}); if (e.originalevent) {e = e.originalevent; $ scope.incrementminutes (): $ scope.decrementminutes ()); E.preventDefault (); Invalidseconds) {ngmodelctrl. $ setviewvalue (null); if (angular.isdefined (Invalidseconds) {$ scope.invalidseconds = invalidseconds; Invalidate (true); seconds = getsecondsfromtemplate (); {$ scope. $ применить (function () {$ scope.seconds = pad ($ scope.seconds); ngmodelctrl. $ modelvalue.seconds}: null; MATH.FLOOR (TOTALSECONDS / 60), Seconds: Totalseconds % 60}; Выбранные. Выбранные. } function getMinutesfromtemplate () {var minots = parseint ($ scope.minutes, 10); } $ scope.incrementminutes = function () {addseconds (minutestep * 60); addseconds (-secondstep); $ scope.previewtime = function (минуты, секунд) {var totalseconds = parseint (минуты, 10) * 60 + parseint (секунд, 10), HH = Pad (Math.floor (Totalseconds / 3600)), MM = Pad (минуты % 60), ss = pad (секунда);Соответствующая реализация шаблона:
<table> <tbody> <tr> <td> <a ng-click = "IGNERMinutes ()"> <pan> </span> </a> </td> <td> </td> <td> <a ng-click = "urmentseconds ()"> <pan> </span> </a> </td> <td> </td> </td> <td> <td> <td> <td> <td> ng-class = "{'has-error': Invalidminutes}"> <input type = "text" ng-model = "minots" ng-change = "updateminutes ()" ng-mousewheel = "ingrementMinutes ()" "ng-readly =" readonInput "maxLength =" 3 " ng-class = "{'has-error': invalidseconds}"> <input type = "text" ng-model = "seconds" ng-change = "updateseconds ()" ng-mousewhele = "urmentioneconds ()" ng-readly = "readonlinpt" maxlength = "2"> <td> <! NG-SHOW = "Validity"> {{PreviewTime (минуты, секунд)}} </span> </td> </tr> <tr> <td> <a ng-click = "decrementminutes ()"> <pan> </span> </a> </td> <td> </td> <td> <a ng-click = "span>"/spansecond () </td> <td> </a> </td> <td> </td> </tr> </tbody> </table>Тестовый код (то есть исходный код диалога, взятый на предыдущем скриншоте):
<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>End Time:</h4> <minute-second-picker ng-model="endTime" validity="endTimeValidity"></minute-second-picker> </div> </div> <div> <div> Tags: </div> <div> <tags model="tags" src="s as s.name for s in sourceTags" options="{ addable: 'true' / startTime) "> ok </button> <кнопка ng-click =" cancel () "> Cancel </button> </div>Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.