프로젝트에서는 몇 분, 초에 입력해야하지만 일부 오픈 소스 프로젝트를 조사한 후에는 적절한 제어가 없습니다. Angular Bootstrap UI에는 비슷한 제어 시계가 있지만 몇 분 및 초 정밀도는 깊이 들어 가지 않습니다.
따라서 소스 코드를 참조하여 직접 구현하기로 결정했습니다.
최종 효과는 다음과 같습니다.
첫 번째는 지침의 정의입니다.
app.directive ( 'mingecondpicker', function () {return {return {extrict : 'ea', 요구 사항 : [ 'mintersecondpicker', '?^ngmodel'], 컨트롤러 : 'minglecondpickercontroller', 교체 : true, '='}, partplateurl/distrive/counts (furtives/QUSTIVES) 요소, ctrls) {var minutesecondpickerctrl = ctrls [0], ngmodelctrl = ctrls [1];위의 링크 함수에서 Ctrls는 배열입니다. ctrls [0] 은이 지시에 정의 된 컨트롤러 인스턴스이고 Ctrls [1]은 ngmodelctrl, 즉 ng- 모델에 해당하는 컨트롤러 인스턴스입니다. 이 순서는 실제로 요구 사항에 의해 정의됩니다 : [ 'minutesecondpicker', '?^ngmodel'].
첫 번째 종속성 은 지침 자체의 이름이며, 지침에서 컨트롤러가 선언 한 해당 인스턴스가 전달됩니다. 두 번째 종속성은 약간 이상합니다 : "?^ngModel", 의미? 종속성을 찾을 수없는 경우에도 예외를 던지지 마십시오. 즉, 종속성은 선택적 옵션입니다. ^의 의미는 부모 요소의 컨트롤러를 찾는 것입니다.
그런 다음이 지침에 사용 된 일부 기본 설정을 정의하고 지속적인 지침을 통해이를 구현하십시오.
app.constant ( 'minutesecondpickerconfig', {minutestep : 1, secondstep : 1, readonlyinput : false, mousewheel : true});다음은 지침 해당 컨트롤러이며 다음과 같이 선언됩니다.
app.controller ( 'mingecondpickercontroller', [ '$ scope', '$ attrs', '$ parse', 'minutesecondPickerConfig', function ($ scope, $ attrs, $ parse, minutesecondPickerConfig) {...}];Directive Link 함수 에서이 컨트롤러의 초기 메소드를 다음과 같습니다.
this.init = function (ngmodelctrl_, inputs) {ngmodelctrl = ngmodelctrl_; ngmodelctrl. $ render = this.render; var mingsinputel = inputs.eq (0), secondSinputel = inputs.eq (1); var mousewheel = angular.isdefined ($ attrs.mousewheel)? $ scope. $ parent. $ atal ($ attrs.mousewheel) : mintersecondpickerconfig.mousewheel; if (mousewheel) {this.setupmousewheelevents (mintersinputel, secondsinputel); } $ scope.readonlyInput = Angular.isdefined ($ attrs.readonlyInput)? $ scope. $ parent. $ atal ($ attrs.readonlyInput) : mintersecondpickerconfig.readonlyInput; this.setupinPuteVents (mingsinputel, secondSinputel); };INT 메소드에 의해 허용되는 두 번째 매개 변수는 입력이며 링크 함수에서 전달 된 매개 변수는 ement.Find ( 'Input')입니다. 따라서 첫 번째 입력 상자는 몇 분을 입력하는 데 사용되며 두 번째 입력 상자는 초에 들어가는 데 사용됩니다.
그런 다음 Mousewheel 속성이 덮어 쓰는지 확인하십시오. 덮어 쓰기가없는 경우 기본 마우스 휠 세트를 상수로 사용하고 다음과 같이 관련 설정을 만듭니다.
// mousewheel spin this.setupmousewheelevents = function (mentsinputel, secondsinputel) {var isscrollingup = function (e) {if (e.originalevent) {e = e.originalevent; } // 이벤트 var delta = (e.wheeldata)에 따라 올바른 델타 변수를 선택합니까? e.wheeldata : -e.deltay; return (e.detail || 델타> 0); }; mintersInputel.bind ( 'Mousewheel Wheel', function (e) {$ scope. $ apply ((isscrollingup (e))? $ scope.incrementminutes () : $ scope.decrementminutes (); e.preventDefault ();}); SeconSinputel.bind ( 'Mousewheel Wheel', function (e) {$ scope. $ apply ((isscrollingup (e))? $ scope.incrementseconds () : $ scope.decrementseconds ()); e.preventDefault ();}; };INT 메소드는 결국 입력 자체에 대한 일부 설정을 만듭니다.
// 직접 입력에서 응답 this.setUpinPuteVents = function (mindersInputel, secondSinputel) {if ($ scope.ReadonLyInput) {$ scope.updateminutes = Angular.noop; $ scope.updateseconds = Angular.noop; 반품; } var invalidate = function (invalidminutes, invalidseconds) {ngmodelctrl. $ setViewValue (null); ngmodelctrl. $ setValidity ( 'time', false); $ SCOPE.VALIDICE = FALSE; if (angular.isdefined (invalidminutes)) {$ scope.invalidminutes = invalidminutes; } if (angular.isdefined (invalidseconds)) {$ scope.invalidseconds = invalidseconds; }}; $ SCOPE.UPDATEMINUTES = function () {var minder = getMinutesfromtemplate (); if (angular.isdefined (minds)) {selected.minutes = minter; 새로 고침 ( 'm'); } else {invalidate (true); }}; mintersInputel.bind ( 'blur', function (e) {if (! $ scope.invalidMinutes && $ scope.minutes <10) {$ scope. $ apply (function () {$ scope.minutes = pad ($ scope.minutes);})); $ scope.updateseconds = function () {var secons = getSecondsfromtemplate (); if (angular.isdefined (seconds)) {selected.seconds = seconds; 새로 고침 ( 's'); } else {invalidate (정의되지 않은, true); }}; secondSinputel.bind ( 'blur', function (e) {if (! $ scope.invalidseconds && $ scope.seconds <10) {$ scope. $ apply (function () {$ scope.seconds = pad ($ scope.seconds);}); };이 방법에서는 입력을 불법적으로 설정하기 위해 무효화 함수가 선언되며, 이는 페이지에 적절하게 응답 할 수있는 기회를 제공하기 위해 범위의 유효성 = 거짓 속성을 노출시킵니다.
사용자가 변수를 사용하여 Minutestep 또는 SecondStep을 나타내는 경우 해당 시청자를 설정해야합니다.
var minutestep = minutesecondpickerconfig.minutestep; if ($ attrs.minutestep) {$ scope.parent. $ watch ($ parse ($ parse ($ attrs.minutestep), 함수 (value) {minutestep = parseint (value, 10);}); } var SecondStep = minutesecondPickerConfig.secondstep; if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ parse ($ attrs.secondstep)), function (value) {SecondStep = parseint (value, 10);}); }완전한 지시 구현 코드는 다음과 같습니다.
var app = angular.module ( "minutsecondpickerdemo"); app.directive ( 'mperecondpicker', function () {returic : 'ea', 요구 사항 : [ 'mingecondpicker', '?^ngmodel'], controller : 'mingecondpickercontroller', 'template, scope : {'}, templateurl : '부분/지침/mingecondpicker.html', 링크 : 함수 (범위, 요소, attrs, ctrls) {var minderecondpickerctrl [0], ngmodelctrl = ctrls [1]; 요소 ( '입력');});}); app.constant, {minutestep : 1, sec 'mingecondpickerconfig', function ($ scope, $ attrs, $ parse, minutesecondpickerconfig) {var selected = {mper : 0, ngmodelctrl = {$ setViewValue : angular.noop}; ngmodelctrl_; if (mousewheel) {this. secondsinputel); var minutestep = min. if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondstep), function (value) {secondstep = parseint (value, 10);}) // mousewheel spin this.setupmousewheelevents = secondsinputel (var issinputel) {e. if (e.originalevent) {e = e.wheeldata에 따라 델타 변수를 선택하십시오. $ scope.incrementminutes () : $ scope.decrementminutes ()); e.preventefault (); invalidseconds) {ngmodelctrl. if (angular.isdeconds) {invalidseconds}; 무효화 (true)}; Seconds = angular.isdected (seconds) { 's'); {$ scope. ngmodelctrl. 수학 (Totalseconds / 60). select.seconds}; SECLEDS = SECONDS. } getminutes intmints (var return) (minutes return); } inctionminutes () {minutestep * 60; 첨가 된 경우 (Seconds); $ scope.previewtime = function (분, 초) {var thatalseconds = parseint (분, 10) * 60 + parseint (seconds, 10), mm = pad (meger % 60), ss = pad (초);해당 템플릿 구현 :
<table> <tbody> <t> <td> <a ng-click = "excrementminutes ()"> <span> </span> </a> </td> <td> </td> <td> <incrementeseconds () "> <pan> </span >> </td> <td> </td> </td> </td> </td> ng-class = "{ 'has-error': invalidminutes}"> <input type = "text"ng-model = "mings"ng-change = "updateminutes ()"ng-mousewheel = "xcrementminutes ()" "ng-readonly ="readonlyinput "maxlength ="3 "> </td> : </td> : ng-class = "{ 'has-error': invalidseconds}"> <input type = "text"ng-model = "seconds"ng-change = "updateeconds ()"ng-mousewheel = "excrementeseconds ()"ng-readonly = "readonlyinput"maxlength = "2"> <td> <td> <td> <td> <td> ng-show = "validity"> {{previewtime (분, 초)}}}} </span> </td> </tr> <tr> <a ng-click = "retementminutes ()"> <span> </span> </a> </td> <td> </td> <a ng click = "> <a glick ="> </a> </td> <td> </td> </tr> </tbody> </table>테스트 코드 (즉, 이전 스크린 샷에서 찍은 대화 상자의 소스 코드) :
<div> <h3> 하이라이트 <span> {{moviename}} </span> </h3> </div> <div> <div> <div id = "Highlow-Start"> <h4> 시작 시간 : </h4> <minute-second-picker ng-model = "starttime"validity = "starttimevalidity"> div id = </minder-second-picker> <h4> 종료 시간 : </h4> <minute-second-picker ng-model = "endtime"validgy = "endtimevalidity"> </minute-second-picker> </div> </div> <div> <div> 태그 : </div> <div> <태그 모델 = "tags"src = "s s.name as sourceTags" } "> </div> </div> </div> <div> <button ng-click ="ng-disabled = "! starttimevalidge || STARTTIME) "> OK </button> <Button NG-Click ="cance () "> 취소 </button> </div>여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.