1

en el siguiente codigo al presionar el botón Configurar hora se hace visible el input con el timepicker y se lanza el evento change, después se oculta con el botón Ir a otra pagina, este botón lo oculta con ng-if pero esto provoca que el elemento desaparezca del dom, y el evento lanzado aun sigue a la espera, por lo que al oprimir el botón Configurar hora por segunda vez, este ya no funciona, esto en la misma vista lo solucione con ng-show para tan solo ocultar el input en el dom, el problema se da cuando cambio de vista y vuelvo a regresar, ¿Como puedo remover o reactivar el evento de nuevo antes de llamarlo?, ¿o podría re enlazar el componente al evento?, les dejo una replica del error

var app = angular.module('app', []);

app.controller('ctrl',function($scope){

    
    $scope.changevalue = () => {
      $scope.configurar = true;
      this.resetTime();
     
    }
    
    $scope.ocultar = () => {
      $scope.configurar = false;
    }
      
    this.resetTime = () => {
      setTimeout(function(){ 
          var timepicker =  new TimePicker('timePicker', {lang: 'en', theme: 'dark'});
  
          timepicker.on('change', function(evt) {
              // este evento solo sucede una vez
              console.log("evt",evt)
              var value = (evt.hour || '00') + ':' + (evt.minute || '00');
              evt.element.value = value;
          }); // fin on change
      }, 200);// fin timeOut
    }// fin resetTime

})
*,:after,:before{box-sizing:border-box;margin:0;padding:0}._jw-tpk-container{position:absolute;width:250px;height:140px;padding:0;background:#fff;font-family:inherit;font-weight:400;overflow:hidden;border-radius:3px;box-sizing:border-box;max-width:250px;margin-left:auto;margin-right:auto;line-height:1rem;font-size:1rem}._jw-tpk-container:after{content:" ";display:block;clear:both}._jw-tpk-container *,._jw-tpk-container :after,._jw-tpk-container :before{box-sizing:border-box}._jw-tpk-container *,._jw-tpk-container .active,._jw-tpk-container :focus,._jw-tpk-container :hover{text-decoration:none;outline:none}._jw-tpk-container._jw-tpk-dragging{opacity:.85!important}._jw-tpk-container._jw-tpk-dragging ._jw-tpk-header{cursor:-webkit-grabbing;cursor:grabbing}._jw-tpk-container ol{text-align:center;list-style-type:none}._jw-tpk-container ol>li{display:inline-block}._jw-tpk-container ol>li>a{display:inline-block;padding:3px 0;width:25px;color:inherit;border-radius:3px;border:1px solid transparent;font-size:1.2rem}._jw-tpk-container ol>li>a:not(._jw-tpk-selected):hover{cursor:pointer;border:1px solid #ccc;border-right:1px solid #aaa;border-bottom:1px solid #aaa;background:#f5f5f5;background:-webkit-linear-gradient(#e6e6e6,#f5f5f5);background:linear-gradient(#e6e6e6,#f5f5f5);box-shadow:0 2px 3px hsla(0,0%,86%,.8)}._jw-tpk-header{position:relative;font-weight:600;text-align:center;cursor:-webkit-grab;cursor:grab;line-height:1.875rem}._jw-tpk-header:after,._jw-tpk-header:before{content:"";display:table}._jw-tpk-header:after{clear:both}._jw-tpk-body{padding:2px 0}._jw-tpk-body:after,._jw-tpk-body:before{content:"";display:table}._jw-tpk-body:after{clear:both}._jw-tpk-hour{width:64.49275%;float:left;margin-right:1.44928%}._jw-tpk-minute{width:34.05797%;float:right;margin-right:0}._jw-tpk-dark{color:#212121;box-shadow:inset 0 0 0 1px #212121}._jw-tpk-dark ._jw-tpk-header,._jw-tpk-dark ol>li>a._jw-tpk-selected{color:#f5f5f5;background:-webkit-linear-gradient(#212121,#545454);background:linear-gradient(#212121,#545454)}._jw-tpk-blue-grey{color:#263238;box-shadow:inset 0 0 0 1px #263238}._jw-tpk-blue-grey ._jw-tpk-header,._jw-tpk-blue-grey ol>li>a._jw-tpk-selected{color:#cfd8dc;background:-webkit-linear-gradient(#263238,#4f6875);background:linear-gradient(#263238,#4f6875)}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>


<div ng-app="app">
  <div ng-controller="ctrl">
      <button name="button" ng-click="ocultar()">Ir a otra pagina</button>
      <button name="button" ng-click="changevalue()">Configurar hora</button>
      <input type="text" class="form-control" id="timePicker" data-ng-if="configurar"  ng-model="hora"     autocomplete="off">
  </div>
</div>

1 respuesta 1

1
+50

Al parecer es un error del timepicker, que crear siempre un nuevo elemento. Puedes corregirlo preguntando si el elemento ya existe y luego eliminarlo.

this.resetTime = () => {
  setTimeout(function(){
      // Elimina el elemento del timepicker si ya existe
      if(document.querySelector('._jw-tpk-container')) {
          document.querySelector('._jw-tpk-container').remove();
      }
      var timepicker =  new TimePicker('timePicker', {lang: 'en', theme: 'dark'});

      timepicker.on('change', function(evt) {
          // este evento solo sucede una vez
          console.log("evt",evt)
          var value = (evt.hour || '00') + ':' + (evt.minute || '00');
          evt.element.value = value;
      }); // fin on change
  }, 200);// fin timeOut
}// fin resetTime

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.