プロジェクトでは、数分と秒を入力するための制御が必要ですが、いくつかのオープンソースプロジェクトを調査した後、適切なコントロールは見つかりません。 Angular Bootstrap UIには、同様のコントロールタイムパイカーがありますが、数分や秒の精度に深く入りません。
したがって、ソースコードを参照して自分で実装することが決定されます。
最終的な効果は次のとおりです。
最初は指令の定義です。
app.directive（ 'minutesecondpicker'、function（）{return {restrict： 'ea'、require：['minutesecondpicker'、 '？^ngmodel']、コントローラー： 'minutesecondpickercontroller'、true、scope：{妥当性： '='}、templateurrill：関数（範囲、要素、ctrls）{var minutesecondpickertls [0]、ngmodelctrl = ctrls [1];上記のリンク関数では、Ctrlsは配列です。Ctrls[0]はこの指令で定義されたコントローラーインスタンスであり、Ctrls [1]はNgmodelctrl、つまりNg-Modelに対応するコントローラーインスタンスです。この順序は、実際にはrequireによって定義されます。
最初の依存関係は指令自体の名前であり、指令のコントローラーによって宣言された対応するインスタンスは渡されます。2番目の依存関係は少し奇妙に書かれています：「？^ngmodel」、意味ですか？依存関係が見つからない場合でも、例外をスローしないでください。つまり、依存関係はオプションのオプションです。 ^の意味は、親要素のコントローラーを見つけることです。
次に、この指令で使用されるいくつかのデフォルト設定を定義し、定数指令を使用してそれらを実装します。
app.Constant（ 'minutesecondpickerconfig'、{minuteStep：1、secondstep：1、readonlyinput：false、mousewheel：true}）;次は、次のように宣言されている指令に対応するコントローラーです。
app.Controller（ 'MinutesEcondPickerController'、['$ scope'、 '$ attrs'、 '$ parse'、 'minutesecondpickerconfig'、function（$ scope、$ attrs、$ parse、minutesecondpickerconfig）{...}]）;ディレクティブリンク関数では、このコントローラーのinitメソッドが呼び出されます。
this.init = function（ngmodelctrl_、inputs）{ngmodelctrl = ngmodelctrl_; ngmodelctrl。$ render = this.render; var minutesinputel = inputs.eq（0）、secondsinputel = inputs.eq（1）; var mousewheel = angular.isdefined（$ attrs.mousewheel）？ $ scope。$ parent。$ eval（$ attrs.mousewheel）：minutesecondpickerconfig.mousewheel; if（mousewheel）{this.setupMouseWheeLevents（MinutesInputel、secondSinputel）; } $ scope.readonlyInput = angular.isdefined（$ attrs.readonlyinput）？ $ scope。$ parent。$ eval（$ attrs.readonlyinput）：minutesecondpickerconfig.readonlyinput; this.setupinputevents（minutesinputel、secondsinputel）; };initメソッドで受け入れられる2番目のパラメーターは入力であり、リンク関数で渡されたパラメーターは次のとおりです。したがって、最初の入力ボックスを使用して議事録を入力し、2番目の入力ボックスを使用して秒の入力に使用されます。
次に、マウスホイール属性が上書きされているかどうかを確認します。上書きがない場合は、デフォルトのマウスホイールを一定に設定し、次のように関連する設定を作成します。
//マウスホイールスピンthis.setupMouseWheeLevents = function（minutesinputel、secondsinputel）{var isscrollingup = function（e）{if（e.originalevent）{e = e.originalevent; } //イベントvar delta =（e.wheeldata）に応じて正しいデルタ変数を選択しますか？ e.wheeldata：-e.deltay; return（e.detail || delta> 0）; }; MinutesInputel.bind（ 'MouseWheel wheel'、function（e）{$ scope。$ apply（（isscrollingup（e））？$ scope.incrementminutes（）：$ scope.decrementminutes（））; e.preventdefault（）;}）; secondsinputel.bind（ 'mousewheel wheel'、function（e）{$ scope。$ apply（（ysscrollingup（e））？$ scope.incrementseconds（）：$ scope.decrementseconds（））; e.preventdefault（）;}）; };INITメソッドは、最終的に入力自体のいくつかの設定を作成します。
//直接入力で応答this.setupinputevents = function（minutesinputel、secondsinputel）{if（$ scope.readonlyinput）{$ scope.updateminutes = angular.noop; $ scope.updateseconds = angular.noop;戻る; } var Invalidate = function（invalidminutes、invalidseconds）{ngmodelctrl。$ setViewValue（null）; ngmodelctrl。$ setAlidity（ 'time'、false）; $ SCOPE.ALITITY = false; if（angular.isdefined（invalidminutes））{$ scope.invalidminutes = nivalidminutes; } if（angular.isdefined（nivalidseconds））{$ scope.invalidseconds = nivalidseconds; }}; $ scope.updateminutes = function（）{var minutes = getminutesfromtemplate（）; if（angular.isdefined（minutes））{selected.minutes = minutes;更新（ 'm'）; } else {nivalidate（true）; }}; minutesinputel.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（秒））{selected.seconds =秒;更新（ 's'）; } else {nivalidate（undefined、true）; }}; secondsinputel.bind（ 'Blur'、function（e）{if（！$ scope.invalidseconds && $ scope.seconds <10）{$ scope。$ apply（function（）{$ scope.seconds = pad（$ scope.seconds）;}）;}）; };この方法では、入力を違法に設定するために無効な関数が宣言されています。これは、範囲内の有効性=偽のプロパティを公開して、ページに適切に対応する機会を与えます。
ユーザーが変数を使用してMinuteStepまたは2番目のステップを表す場合、対応するウォッチャーを設定する必要があります。
var minuteStep = minutesecondpickerconfig.minutestep; if（$ attrs.minutestep）{$ scope.parent。$ watch（$ parse（$ attrs.minutestep）、function（value）{minutestep = parseint（value、10）;}）; } var secondstep = minutesecondpickerconfig.secondstep; if（$ attrs.secondstep）{$ scope.parent。$ watch（$ parse（$ attrs.secondstep）、function（value）{secondstep = parseint（value、10）;}）; }完全なディレクティブ実装コードは次のとおりです。
var app = angular.module（ "minutesecondpickerdemo"）; app.directive（ 'minutesecondpicker'、function（）{return {restrict： 'ea'、require：['minutesecondpicker'、 '？^ngmodel']、コントローラー： 'MinutesEcondPickerTroller'、 'MinutesEcondPickertroller'、frue： '=' {'= spread：' + 'partials/directives/minutesecondpicker.html'、link：function（scope、element、actrls）{var minutesecondpickerctrl = ctrls [0]、ngmodelctrl = ctrls [1]; element.find（ 'input'）;}}}}};} 'minutesecondpickerconfig'、function（$ scope、$ attrs、$ parse、minutesecondpickerconfig）{var selected = {minutes：0、秒}、ngmodelctrl = {$ setViewValue：angular.noop}; ngmodelctrl_; （mousewheel）{this.setupmouse -heelevents（senthinginputel）; secondsinputel）; if（$ attrs.secondstep）{$ scope.parent。$ watch（$ attrs.secondstep）、function（value）{secondstep = parseint（value、10）;} （e.originalevent）//イベントvardata =（e.wheeldata）を選択します。 $ scope。 $ decrementseconds（）;無効な関数（無効な秒）{ngmodelctrl（null）。 （Angular.Invalidseconds = scope.updateminutes = function）{varidseconds {nightioned（and）; Invalidate（true）}}}（e）{if（！$ scope.minutes <10）{$ scope seconds = getseconds fromtemplate（seconds.seconds = seconds（ 's'）; 10）{$ scope.seconds = scope.seconds;}）; ngmodelctrl。 Math.floor（合計秒） select.seconds}）秒= $ scope === getminutes from bar minutes（$ scope.10）; } scope.incedseconds（）$ scope. {） Addeconds（seconds.minutes * selects.seconds.seconds）; $ scope.previewtime（数分、秒）{var totalseints = parseint（minutes、10） * 60 + parseint（秒、10）、hh = pad（totalseconds / 3600）、mm = pad（分数60）、ss = pad（秒）;対応するテンプレートの実装：
<Table> <tbody> <tr> <td> <a ng-click = "incrementminutes（）"> <span> </span> </a> </td> <td> </td> <td> <a ng-click = "incrementseconds（）"> <span> </span> </a> ng-class = "{'has-error'：nivalidminutes}"> <input type = "text" ng-model = "minutes" ng-change = "updateminutes（）" ng-mousewheel = "incrementminutes（）" "ng-readonly =" readonlyinput "maxlent =" ng-class = "{'has-error'：nivalidseconds}"> <input type = "text" ng-model = "秒" ng-change = "updateseconds（）" ng-mousewheel = "incrementseconds（）" ng-readonly = "readonlyinput" maxlent = "2"> <td> ng-show = "妥当性"> {{previewtime（minutes、秒）}}} </span> </td> </tr> <tr> <td> <a ng-click = "Decrentminutes（）"> </span> </a> </td> <td> </td> <SPAN> </a> </td> <td> </td> </tr> </tbody> </table>テストコード（つまり、前のスクリーンショットで撮影したダイアログのソースコード）：
<div> <h3> <span> {{moviename}} </span> </h3> </div> <div> <div> <div = "highlight-start"> <h4> start time：</h4> <minute-second-picker ng-model = "起源" id = "Highlight-end"> <h4>終了時間：</h4> <minute-second-picker ng-model = "endtime"有効性= "endtimevalidity"> </minute-second-picker> </div> </div> <div> <div>タグAddable： 'true'} "> </tags> </div> </div> <div> <button ng-click =" ng-disabled = "！ durationincorrect（endtime、starttime） "> ok </button> <button ng-click =" cancel（） "> cancel </button> </div>それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。