In einem Projekt ist eine Kontrolle erforderlich, um Minuten und Sekunden einzugeben. Nach der Untersuchung einiger Open -Source -Projekte wird jedoch keine geeignete Kontrolle gefunden. Es gibt einen ähnlichen Kontroll -TimePicker in der Winkel -Bootstrap -Benutzeroberfläche, aber es geht nicht in Minuten und Sekunden -Präzision.
Daher wird beschlossen, auf seinen Quellcode zu verweisen und ihn selbst zu implementieren.
Der endgültige Effekt ist wie folgt:
Erstens ist die Definition der Richtlinie:
app.directive ('mutenecondpicker', function () {retrict {prestrict: 'ea', verlangt: ['mutenecondpicker', '?^ngmodel'], Controller: 'minutenecondpickerController', ersetzen: true, scope: {validität: '='}, templateurl: 'partials/lichives/links', 'partials/Directives/Directives/Directives/Directive/minuting/minuting/minuting/minuting/minuting/minutescond-' minutescond ': Funktion (Umfang, Element, Strls) {var mutenecondpickerctrl = Strls [0], NgmodelCtrl = Strgs [1];In der obigen Verbindungsfunktion ist CTRLS ein Array: Strgs [0] die in dieser Anweisung definierte Controller-Instanz, und Ctrls [1] ist ngmodelctrl, dh die Controller-Instanz, die dem NG-Modell entspricht. Diese Reihenfolge wird tatsächlich definiert von Forderung: ['mutenecondpicker', '?^Ngmodel'].
Beachten Sie, dass die erste Abhängigkeit der Name der Richtlinie selbst ist und die entsprechende Instanz, die vom Controller in der Richtlinie deklariert wurde, übergeben wird. Die zweite Abhängigkeit ist etwas seltsam geschrieben: "?^Ngmodel", die Bedeutung von? Ist, dass selbst wenn die Abhängigkeit nicht gefunden wird, keine Ausnahme, das heißt, die Abhängigkeit ist eine optionale Option. Die Bedeutung von ^ besteht darin, den Controller des übergeordneten Elements zu finden.
Definieren Sie dann einige in dieser Richtlinie verwendete Standardeinstellungen und implementieren Sie sie durch konstante Richtlinie:
app.constant ('mutenecondpickerConfig', {minutestep: 1, Secondstep: 1, ReadOnlyInput: Falsch, Mausrad: true});Als nächstes kommt die Richtlinie entsprechende Controller, die wie folgt erklärt wird:
app.controller ('mutenecondpickerController', ['$ scope', '$ attrs', '$ parse', 'mutenecondpickerConfig', Funktion ($ scope, $ attrs, $ parse, mutenecondPickerConfig) {...}]);In der Richtlinieverbindungsfunktion heißt die Init -Methode dieses Controllers:
this.init = function (ngmodelctrl_, Eingänge) {ngmodelctrl = ngmodelCtrl_; ngmodelctrl. $ render = this.render; var muteInputel = inputs.eq (0), Secondsinputel = inputs.eq (1); var Mauswheel = angular.isdefined ($ attr.Mousewheel)? $ scope. $ parent. if (Mausrad) {this.setUpMouseWheelEvents (minutesInputel, Secondsinputel); } $ scope.readonlyInput = angular.isdefined ($ attr.readonlyInput)? $ scope. $ parent. this.setUpInputEvents (minutesInputel, Secondsinputel); };Der von der Init -Methode akzeptierte zweite Parameter ist Eingänge, und die in der Verbindungsfunktion übergebene Element.Find ('Eingabe'). Das erste Eingangsfeld wird also verwendet, um Minuten einzugeben, und das zweite Eingangsfeld wird verwendet, um Sekunden einzugeben.
Überprüfen Sie dann, ob das Mausradattribut überschrieben ist. Wenn es keinen überschriebenen gibt, verwenden Sie das Standardmausrad in Konstant und erstellen Sie die relevanten Einstellungen wie folgt:
// auf Mausrad -Spin this.setupMousewheelEvents = Funktion (minutesInputel, Secondsinputel) {var iscrollingUp = Funktion (e) {if (e.originalEvent) {e = e.originalEvent; } // Die korrekte Delta -Variable auswählen, abhängig von Ereignis var delta = (e.wheeldata)? E.Wheeldata: -e.deltay; return (E.Detail || Delta> 0); }; minutesInputel.bind ('Mausradrad', Funktion (e) {$ scope. $ bewerben ((isscrollingUp (e))? Secondsinputel.bind ('Mausradrad', Funktion (e) {$ scope. $ bewerben ((isscrollingUp (e))? };Die Init -Methode erstellt schließlich einige Einstellungen für die Eingänge selbst:
// auf direkte Eingabe this.setUpInputEvents = Funktion (minutesInputel, Secondsinputel) {if ($ scope.readonlyInput) {$ scope.Updateminutes = angular.noop; $ scope.updateSeconds = angular.noop; zurückkehren; } var Invalidate = Funktion (InvalidMinutes, InvalidSeconds) {NgModelCtrl. $ setViewValue (null); ngmodelctrl. $ setvalidity ('time', false); $ scope.validity = false; if (angular.isdefined (InvalidMinutes)) {$ scope.inValidminutes = InvalidMinutes; } if (angular.isdefined (InvalidSeconds)) {$ scope.invalidSeconds = InvalidSeconds; }}; $ scope.Updateminutes = function () {var muthines = getMinutesFromTemplate (); if (angular.isdefined (minute)) {selected.Minutes = Minuten; erfrischen ('m'); } else {ungültig (wahr); }}; minutesInputel.bind ('Blur', Funktion (e) {if (! $ scope.UpDateSeconds = function () {var Seconds = GetsecondsfromTemplate (); if (angular.isdefined (Sekunden)) {selected.seconds = Sekunden; aktualisieren ('s'); } else {ungültig (undefiniert, wahr); }}; Secondsinputel.bind ('Blur', Funktion (E) {if (! };Bei dieser Methode wird eine ungültigere Funktion für die Festlegung der Eingabe illegal deklariert, die eine Gültigkeit = falsches Eigentum im Bereich aufdeckt, um der Seite die Chance zu geben, angemessen zu reagieren.
Wenn der Benutzer eine Variable verwendet, um Minutestep oder SecondStep darzustellen, müssen die entsprechenden Beobachter festgelegt werden:
var minutestep = muthinecondpickerconfig.minutestep; if ($ attr.minutestep) {$ scope.parent. $ watch ($ parse ($ attr.minutestep), Funktion (Wert) {minutestep = parseInt (Wert, 10);}); } var SecondStep = mutmaßliche EEGECONDPICKERCONFIG.SECONDSTEP; if ($ attr.secondStep) {$ scope.parent. }Der vollständige Richtlinie -Implementierungscode lautet wie folgt:
var app = angular.module("minuteSecondPickerDemo");app.directive('minuteSecondPicker', function() { return { restrict: 'EA', require: ['minuteSecondPicker', '?^ngModel'], controller: 'minuteSecondPickerController', replace: true, scope: { validity: '=' }, templateUrl: 'partials/Richtlinien/minutenEcondpicker.html', Link: Funktion (Scope, Element, Attrs, Strls) {var mutenecondpickerctrl = Strgs [0], ngmodelctrl = Strls [1]; Element.find ('Input')); 'mutenecondPickerConfig', Funktion ($ scope, $ attrs, $ parse, mutwoyecondpickerfig) {var ausgewählt = {Minuten: 0, Sekunden: 0}, ngmodelctrl = {$ setViewValue: Angular.noop}; ngmodelctrl_; if (Mausrad) {this.setUpMousewheelevent (MinuteInputel, SecondSInputel); SecondSInputel); if ($ attr.secondStep) {$ scope.Parent. if (e.originalevent) {e = e.originalevent; $ scope.incrementMinutes (): $ scope.decrementMinutes ()); E.PreventDefault (); {ngmodelCtrl. $ setViewValue (null); $ scope.invalidSeconds = InvalidSeconds; Funktion (e) {if (! if (angular.isdefined (Sekunden) {Selected.Seconds = Sekunden; $ scope.seconds = pad ($ scope.seconds); Passen Sie die Zeit für den ersten Wert an (Zeit = Zeit; ngmodelctrl. $ setvality ('time', true) : pad (minute); > = 0). $ scope.decrementMinutes = function () {addSeconds (-Minutestep * 60); Ausgewählt.Minutes * 60 + Selected.seconds + Sekunden; ParseInt (Sekunden, 10), HH = PAD (Math.Floor (Gesamtkunden / 3600)), MM = PAD (Minuten % 60), SS = PAD (Sekunden);Entsprechende Vorlagen -Implementierung:
<table> <tbody> <tr> <td> <A ng-klick = "IncrementMinutes ()"> </span> </a> </td> <td> </td> <td> <Ang-klicks. ng-class = "{'has-freor': InvalidMinutes}"> <Eingabe type = "text" ng-model = "minute" ng-whange = "updateminutes ()" ng-mousewheel = "IncrementMinutes ()" "ng-rosely =" maxlength. ng-class = "{'has-eRor': InvalidSeconds}"> <Eingabe type = "text" ng-model = "Sekunden" ng-whange = "updateSeconds ()" ng-mousewheel = "IncrentsSeconds ()" ng-roadonly = "readonlyinput" MaxLength = "2" <“<Td> <! ng-show = "validity"> {{{previewtime (Minuten, Sekunden)}} </span> </td> </tr> <tr> <td> <a ng-klick = "detrementMinutes ()"> <span> </span> </a> </td> <td> </td> <td> <Ang-Click = " </a> </td> <td> </td> </tr> </tbody> </table>Testcode (d. H. Der Quellcode des Dialogfelds im vorherigen Screenshot):
<div> <h3> Highlight auf <span> {{{moviename}} </span> </h3> </div> <div> <div> <div id = "Highlight-Start"> <h4> Startzeit: </h4> <Minute-Second-Picker ng-model 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'} "> </tags> </div> </div> </div> <div> <button ng-klick =" OK () "ng-disabled ="! DurationCorrect (Endtime, StartTime) "> OK </button> <button ng-klick =" cancel () "> cancer </button> </div>Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.