Em um projeto, é necessário um controle para inserir minutos e segundos, mas depois de investigar alguns projetos de código aberto, nenhum controle adequado é encontrado. Existe um relógio de controle de controle semelhante na interface do usuário angular de bootstrap, mas não se aprofundar em minutos e segundos precisão.
Portanto, é decidido referir -se ao seu código -fonte e implementá -lo você mesmo.
O efeito final é o seguinte:
Primeiro é a definição da diretiva:
App.Directive ('MiniSecondpicker', function () {return {Restrive: 'EA', requer: ['MiniSeCondPicker', '? elemento, atts, ctrls) {variensecondpickerctrl = ctrls [0], ngmodelctrl = ctrls [1];Na função de link acima, Ctrls é uma matriz: Ctrls [0] é a instância do controlador definida nesta diretiva, e Ctrls [1] é ngmodelctrl, ou seja, a instância do controlador correspondente ao modelo NG. Esse pedido é realmente definido por requer: ['MiniSecondpicker', '?^Ngmodel'].
Observe que a primeira dependência é o nome da própria diretiva, e a instância correspondente declarada pelo controlador na diretiva será aprovada. A segunda dependência é escrita um pouco estranha: "?^Ngmodel", o significado de? É que, mesmo que a dependência não seja encontrada, não faça uma exceção, ou seja, a dependência é uma opção opcional. O significado de ^ é encontrar o controlador do elemento pai.
Em seguida, defina algumas configurações padrão usadas nesta diretiva e implemente -as por meio de diretiva constante:
App.Constant ('MinidsOndpickerConfig', {MinUtestep: 1, SecondStep: 1, ReadOnlyInput: False, Mousewheel: True});Em seguida, é o controlador correspondente da diretiva, que é declarada da seguinte forma:
App.Controller ('MindesOndPickerController', ['$ scope', '$ attrs', '$ parse', 'MinidsOndPickerConfig', função ($ scope, $ attrs, $ parse, minimensionCondPonfig) {...}]);Na função de link da diretiva, o método init deste controlador é chamado:
this.init = function (ngmodelctrl_, inputs) {ngmodelctrl = ngmodelctrl_; ngmodelctrl. $ render = this.render; var miniSinInputel = inputs.eq (0), SecondSInputel = inputs.eq (1); var mousewheel = angular.isdefined ($ attrs.mousewheel)? $ SCOPE. $ Parent. $ Eval ($ attrs.mousewheel): MindesOndPickerConfig.mousewheel; if (mousewheel) {this.setupMousewheelevents (Miniminputel, SecondSInputel); } $ scope.readonlyInput = angular.isdefined ($ attrs.readonlyInput)? $ SCOPE. $ Parent. $ Eval ($ attrs.readOnlyInput): MindesOndPickerConfig.readonlyInput; this.setUpInputeVents (Miniminputel, SecondSInputel); };O segundo parâmetro aceito pelo método init são as entradas e o aprovado na função de link é: element.find ('entrada'). Portanto, a primeira caixa de entrada é usada para inserir minutos e a segunda caixa de entrada é usada para inserir segundos.
Em seguida, verifique se o atributo da roda do mouse é substituído. Se não houver sobrescrito, use a roda de mouse padrão definida em constante e faça as configurações relevantes da seguinte forma:
// responda no mouse wheel spin this.setupmousewheelevents = function (miniminInputel, segundoSInputel) {var isscrollingup = function (e) {if (e.originalevent) {e = e.originalevent; } // Escolha a variável Delta correta, dependendo do evento var delta = (e.wheeldata)? e.wheeldata: -e.deltay; return (e.Detail || delta> 0); }; MiniSinInputel.bind ('roda de mouse wheel', função (e) {$ scope. $ Aplicar ((ISSCrollingup (e))? $ scope.incrementMinutes (): $ scope.DecRementMinutes ()); e.PreventDefault ();}); SecondsInputel.bind ('roda de mouse wheel', function (e) {$ scope. $ Aplicar ((ISSCrollingup (e))? $ scope.incrementSeconds (): $ scope.DecRementsOnds ()); e.PreventDefault ();}); };O método init finalmente fará algumas configurações para as próprias entradas:
// responda em entrada direta this.setupinputeVents = function (miniminInputel, segundoSInputel) {if ($ scope.readonlyInput) {$ scope.updateminutes = angular.noop; $ scope.UpDateSeconds = angular.noop; retornar; } var invalidate = function (invalidminutes, inválidos segundos) {ngmodelctrl. $ setViewValue (null); ngmodelctrl. $ setValidity ('tempo', false); $ SCOPE.Validez = false; if (angular.isdefined (invalidminutes)) {$ scope.invalidminutes = invalidminutes; } if (angular.isdefined (invalidSeconds)) {$ scope.invalidSeconds = invalidsegunds; }}; $ scope.updateminutes = function () {var minse = getMinutesFromTemplate (); if (angular.isdefined (minutos)) {selected.minutes = minutos; atualização ('m'); } else {invalidate (true); }}; MindesInputel.bind ('Blur', function (e) {if (! $ scope.invalidMinutes && $ scope.minutes <10) {$ scope. $ Aplicar (function () {$ scope.minutes = pad ($ scope.minutes);});}}); $ scope.UpDateSeconds = function () {var Seconds = getSecondsFromTemplate (); if (angular.isdefined (segundos)) {selected.seconds = segundos; refresh ('s'); } else {invalidate (indefinido, true); }}; SecondsInputel.bind ('Blur', function (e) {if (! $ scope.invalidSeconds && $ scope.seconds <10) {$ scope. $ Aplicar (function () {$ scope.seconds = pad ($ scope.seconds);});};); };Neste método, uma função invalidada é declarada para definir a entrada ilegal, que expõe uma validade = propriedade falsa em escopo para dar à página a chance de responder adequadamente.
Se o usuário usar uma variável para representar o MINUTESTEP ou o segundo lugar, os observadores correspondentes precisarão ser definidos:
var minuteStep = MindesOnCondPickerConfig.MinuteStep; if ($ attrs.MinuteStep) {$ scope.parent. $ watch ($ parse ($ attrs.MinUtestep), function (value) {minutestep = parseint (valor, 10);}); } var secundSTEP = MiniSeCondPickerConfig.SecondStep; if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondstep), function (value) {segundostep = parseint (value, 10);}); }O código de implementação completo da diretiva é o seguinte:
var app = angular.module("minuteSecondPickerDemo");app.directive('minuteSecondPicker', function() { return { restrict: 'EA', require: ['minuteSecondPicker', '?^ngModel'], controller: 'minuteSecondPickerController', replace: true, scope: { validity: '=' }, templateUrl: 'Parcials/Directives/Miniensecondpicker.html', link: function (escopo, elemento, atts, ctrls) {variinSoCondPickerctrl = ctrls [0], ngmodelctrl = ctrls [1]; elemento.find ('input')); 'MiniSecondpickerConfig', função ($ scope, $ attrs, $ parse, minimensionEcondpickerConfig) {var selecionado = {minutos: 0, segundos: 0}, ngmodelctrl = {$ setViewValue: angular.noop}; ngmodelctrl_; if (mousewheel) {this.setupmousewheelevents (MiniMPUTEL, SecondSInputel); SecondsInputel); if ($ attrs.secondstep) {$ scope.parent. $ watch ($ parse ($ attrs.secondstep), function (value) {Secondstep = parseint (valor, 10);}); se (e.originalevent) {E = e.originalevent; $ scope.incrementMinutes (): $ SCOPE.DECRENTMINUTES (); E.PreventDault (); inválido {$ SCOPE.InValidSeConds = InvalidSends; Mininsinputel.bind ('Blur', function (e) {if (! $ scope.inValidMinutes && $ scope.minutes <10) {$ scope. $ Aplicar (function () {$ scope.minutes = pad ($ scope.minutes);}); GetSeCondsFromTear $ SCOPE. ngmodelctrl. Math.Floor (TotalSegunds / 60), TotalsOnConds % 60}; selecionado.Seguro); = selecionado.Seguro; getMinutesfrome $ SCOPE.INCREMENTE AO addseconds (-SECONDSTE); $ SCOPE.PreviewTime = Função (minutos, segundos) {var TotalsEconds = parseint (minutos, 10) * 60 + Parseint (segundos, 10), Hh = Pad (Math.floor (TotalSeconds / 3600), Mm = Minds % 60, SS = SS ('Seconds);Implementação de modelo correspondente:
<table> <tbody> <tr> <td> <a ng-click="incrementMinutes()"> <span></span> </a> </td> <td></td> <td> <a ng-click="incrementSeconds()"> <span></span> </a> </td> <td></td> </tr> <tr> <td 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="{'has-error': invalidSeconds}"> <input type="text" ng-model="seconds" ng-change="updateSeconds()" ng-mousewheel="incrementSeconds()" ng-readonly="readonlyInput" maxlength="2"> <td> <!-- preview column --> <td> <span ng-show = "validade"> {{visualizeTime (minutos, segundos)}} </span> </td> </tr> <tr> <td> <a ng-click = "decrementMinutes ()"> <T. </a> </td> <td> </td> </tr> </tbody> </table>Código de teste (ou seja, o código -fonte da caixa de diálogo tirada na captura de tela anterior):
<div> <h3> Destaque em <pan> {{moviename}} </span> </h3> </div> <div> <div> <div id = "destacar-start"> <h4> Horário de início: </h4> <minuto-second-picker ng-model = "starttime" vality = "starttimeVality"> </econd-picker ng-model = "starttime") <h4> Hora de término: </h4> <minuto-segundo-picker ng-model = "endtime" validity = "endtimeValidity"> </minute-second-picker> </div> </div> <div> <div> tags: </div> <div> <tags model = "tags" src = "s como s.name para s in foter s inout. } "> </ags> </div> </div> </div> <div> <botão ng-click =" ok () "ng-disabled ="! startTime) "> ok </button> <botão ng-click =" cancel () "> cancel </butut> </div>Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.