En un proyecto, se necesita un control para ingresar minutos y segundos, pero después de investigar algunos proyectos de código abierto, no se encuentra un control adecuado. Hay un reloj de control de control similar en la interfaz de usuario de Bootstrap Angular, pero no se profundiza en minutos y segundos de precisión.
Por lo tanto, se decide consultar su código fuente e implementarlo usted mismo.
El efecto final es el siguiente:
Primero es la definición de la directiva:
app.directive('minuteSecondPicker', function() { return { restrict: 'EA', require: ['minuteSecondPicker', '?^ngModel'], controller: 'minuteSecondPickerController', replace: true, scope: { validity: '=' }, templateUrl: 'partials/directives/minuteSecondPicker.html', link: function (scope, element, attrs, ctrls) {var minutesecondpickerCtrl = ctrls [0], ngmodelctrl = ctrls [1];En la función de enlace anterior, CTRLS es una matriz: CTRLS [0] es la instancia del controlador definida en esta directiva, y CTRLS [1] es NGModelCtrl, es decir, la instancia del controlador correspondiente al modelo NG. Este orden en realidad se define por el requerimiento: ['MondonecondPicker', '?^Ngmodel'].
Tenga en cuenta que la primera dependencia es el nombre de la directiva en sí, y la instancia correspondiente declarada por el controlador en la Directiva se pasará. La segunda dependencia se escribe un poco extraña: "?^Ngmodel", ¿el significado de? es que incluso si no se encuentra la dependencia, no arroje una excepción, es decir, la dependencia es una opción opcional. El significado de ^ es encontrar el controlador del elemento principal.
Luego, defina algunas configuraciones predeterminadas utilizadas en esta directiva e impleméntalas a través de la directiva constante:
app.constant ('minutesecondpickerConfig', {minutestep: 1, SecondStep: 1, ReadOnlyInput: false, mousewheel: true});El siguiente es el controlador correspondiente de la Directiva, que se declara de la siguiente manera:
App.Controller ('MoneSecondPickerController', ['$ Scope', '$ attrs', '$ parse', 'minutesecondpickerConfig', function ($ scope, $ attrs, $ parse, minutesecondpickerConfig) {...}]);En la función de enlace de directiva, se llama el método init de este controlador:
this.init = function (ngmodelctrl_, entradas) {ngmodelctrl = ngmodelctrl_; ngmodelctrl. $ render = this.render; var minutesInputel = inputs.eq (0), SecondsInputel = inputs.eq (1); var mousewheel = angular.isdefined ($ attrs. mousewheel)? $ alcance. $ parent. $ eval ($ attrs.sousewheel): minutesecondpickerConfig.mousewheel; if (mousewheel) {this.setupMouseWheelEvents (minutesInputel, SecondsInputel); } $ scope.readonlyInput = angular.isdefined ($ attrs.readonlyInput)? $ alcance. $ parent. $ eval ($ attrs.readonlyInput): minutesecondpickerConfig.readonlyInput; this.setupinPutevents (minutesInputel, SecondsInputel); };El segundo parámetro aceptado por el método de inicio es las entradas, y el pasado en la función de enlace es: element.find ('input'). Entonces, el primer cuadro de entrada se usa para ingresar minutos, y el segundo cuadro de entrada se usa para ingresar segundos.
Luego, verifique si el atributo de la rueda del mouse está sobrescribida. Si no hay sobrescribido, use el conjunto de ruedas de mouse predeterminado en constante y haga la configuración relevante de la siguiente manera:
// Responda en el giro de la rueda de ratón. } // elige la variable delta correcta dependiendo del evento var delta = (E.WheelData)? E.WheelData: -e.deltay; return (E.Detail || delta> 0); }; minutesInputel.bind ('Wheel Wheel Wheel', function (e) {$ Scope. $ Aplicar ((issCrollingUp (e))? $ Scope.IncrementMinutes (): $ Scope.DecrementMinutes ()); E.PreventDefault ();}); SecondsInputel.bind ('Wheel Wheel Wheel', function (e) {$ Scope. $ Aplicar ((issCrollingUp (e))? $ scope.incrementseconds (): $ scope.decrementseconds ()); e.preventDefault ();}); };El método de inicio finalmente hará algunas configuraciones para las entradas en sí:
// Responda en la entrada directa this.setupinPutevents = function (minutesInputel, SecondsInputel) {if ($ scope.readonlyInput) {$ scope.updateMinutes = angular.noop; $ scope.updateSeconds = angular.noop; devolver; } var invalidate = function (invalidMinutes, InvalidSeconds) {ngModelCtrl. $ setViewValue (null); ngmodelctrl. $ setValidity ('time', falso); $ scope.validity = false; if (angular.isDefined (invalidminutes)) {$ scope.invalidminutes = invalidminutes; } if (angular.isdefined (invalidSeconds)) {$ scope.invalidSeconds = invalidSeconds; }}; $ scope.updateMinutes = function () {var minutos = getMinutesFromTemplate (); if (angular.isdefined (minutos)) {seleccionado.minutes = minutos; actualizar ('m'); } else {invalidar (true); }}; minutesInputel.bind ('blur', function (e) {if (! $ scope.invalidminutes && $ scope.minutes <10) {$ scope. $ aplic (function () {$ scope.minutes = pad ($ scope.minutes);});}}); $ scope.updateSeconds = function () {var segundos = getSecondsFromTemplate (); if (angular.isdefined (segundos)) {seleccionado.seconds = segundos; actualizar ('s'); } else {invalidar (indefinido, verdadero); }}; SecondsInputel.bind ('blur', function (e) {if (! $ scope.invalidseconds && $ scope.seconds <10) {$ scope. $ apply (function () {$ scope.seconds = pad ($ scope.seconds);});}); };En este método, se declara una función invalidada para establecer la entrada ilegal, que expone una validez = propiedad falsa en el alcance para darle a la página la oportunidad de responder adecuadamente.
Si el usuario usa una variable para representar MinuTestep o SecondStep, entonces los observadores correspondientes deben establecerse:
var minuTestep = minutesecondpickerConfig.MinuTestep; if ($ attrs.minuteStep) {$ scope.parent. $ watch ($ parse ($ attrs.minuteStep), function (valor) {minutestep = parseInt (valor, 10);}); } var SecondStep = MondenSecondPickerConfig.SecondStep; if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondstep), function (value) {SecundStep = parseInt (valor, 10);}); }El código de implementación de directiva completo es el siguiente:
var app = angular.module ("minutesecondpickerDemo"); app.directive ('minutesecondpicker', function () {return {restrict: 'ea', requirir: ['minutesecondpicker', '?^ngmodel'], controlador: 'minutes -methonpickerController', reemplazar: verdadero, scope: {valvalident: '' '}, Temply, temply, Temply, temply 'parcials/directive/minutesecondpicker.html', link: function (scope, element, attrs, ctrls) {var minassecondpickerCtrl = ctrls [0], ngmodelctrl = ctrls [1] element.find ('input')); 'MinutesecondPickerConfig', function ($ scope, $ attrs, $ parse, minutesecondpickerConfig) {var seleccionado = {minutos: 0, segundos: 0}, ngmodelctrl = {$ setViewValue: angular.noop}; ngmodelctrl_; if (mousewheel) {this.setupMouseWheelEvents (MinutesInputel, SecondsInputel); SecondsInputel); if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondStep), function (valor) {SecundStep = parseInt (valor, 10);}); if (e.originalSent) {e = e.originalevent; ? E.PreventDefault (); InvalidSeconds) {ngModelCtrl. $ setViewValue (nulo); if (angular.isDefined (invalidSeconds)) {$ scope.invalidSeconds = invalidSeconds; invalidar (verdadero); Seconds = GetSecondsFromTemplate (); 10) {$ SCOPE. NgModelCtrl. $ ModelValue.seconds}: NULL; Math.floor (TotalSeconds / 60), Seconds: TotalSeconds % 60}; seleccionado.seconds}); Selection.Minutes, Seconds = Select.Seconds; getMinutesFromTemplate () {var minutos = parseint ($ scope.minutes, 10); } $ scope.incrementMinutes = function () {addSeconds (minutestep * 60); AddSeconds (-secondStep); $ scope.previewtime = function (minutos, segundos) {var totseconds = parseint (minutos, 10) * 60 + parseint (segundos, 10), hh = pad (math.floor (totalSeconds / 3600)), mm = pad (minutos % 60), ss = pad (segundos);Implementación de la plantilla correspondiente:
<Table> <Tbody> <tr> <TD> <a ng-Click = "incrementMinutes ()"> <span> </span> </a> </td> <td> </td> <td> <a ng-Chick = "incrementseconds ()"> <span> </aa> </a> </td> <td> </td> </tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> ng-class="{'has-error': invalidMinutes}"> <input type="text" ng-model="minutes" ng-change="updateMinutes()" ng-mousewheel="incrementMinutes()"" ng-readonly="readonlyInput" maxlength="3"> </td> <td>:</td> <td ng-class = "{{'ha-error': invalidSeconds}"> <input type = "text" ng-model = "segundos" ng-change = "updateSeconds ()" ng-mousewheel = "incrementseconds ()" ng-lectly = "readonlyinput" maxlength = "2"> <td> <td> ng-show = "Validity"> {{Previewtime (minutos, segundos)}} </span> </td> </tr> <tr> <tr> <td> <a ng-click = "declementMinutes ()"> <span> </span> </aa> </td> <td> </td> <td> </a> </td> <td> </td> </tr> </tbody> </table>Código de prueba (es decir, el código fuente del cuadro de diálogo tomado en la captura de pantalla anterior):
<viv> <h3> resaltar en <span> {{Moviename}} </span> </h3> </div> <div> <div> <div Id = "resaltar-start"> <h4> start time: </h4> <dindin-second-picker ng-model = "starttime" Validity = "starttimevalident"> <//minuto-second-picker> </div> <iv> <diD "=" destacado " <h4> tiempo de finalización: </h4> <mindin-second-picker ng-model = "endtime" validity = "endtimeValidity"> </indin-second-picker> </div> </div> <div> <div> tags: </div> <div> <telgs modelo = "etiquetas" src = "s como s.name for s in s en Surcetags" opciones " } "> </tags> </div> </div> </div> <div> <button ng-click =" ok () "ng-disable starttime) "> ok </button> <botón ng-click =" cancel () "> Cancelar </boton> </div>Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.