Change event stays active when element disappears from dom

Issue

In the next code, when pressing the Set time button, the input is made visible with the timepicker and the change event is launched, then it is hidden with the button Go to another page, this button hides it with ng-if but this causes the element disappears from dom, and the event launched is still waiting, so when pressing the button Set time for the second time, this not works, this in the same view I solve it with ng-show to just hide the input in on dom, the problem occurs when I change the view and come back, How can I remove or reactivate the event again before calling it? Or could I re-bind the component to the event? I leave a replica of the error.

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

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

    
    $scope.changevalue = () => {
      $scope.setUp = true;
      this.resetTime();
     
    }
    
    $scope.hide = () => {
      $scope.setUp = 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="hide()">Go to another page</button>
      <button name="button" ng-click="changevalue()">Set time</button>
      <input type="text" class="form-control" id="timePicker" data-ng-if="setUp"  ng-model="hour"     autocomplete="off">
  </div>
</div>

Solution

The problem is you're using the old version of the package which use same id hour_list_id and minute_list_id for all picker element and use these id to set select listener. When you call new Timepicker again, it create new picker element but still the same id so the handle is just bind to the first picker element. That's why when you choose time, change is not triggered.

Below is the code related to this in the source code:

...
var ids = {"hour_list":"hour_list_id","minute_list":"minute_list_id"};
...
var _VARS = Object.freeze({
  ...
  ids: ids,
  ...
});
...
var VARS = _VARS;
...
var hour_list = utils.$(VARS.ids.hour_list);
var minute_list = utils.$(VARS.ids.minute_list);
...
this.collection.hours = utils.getAllChildren(hour_list, 'a');
this.collection.minutes = utils.getAllChildren(minute_list, 'a');

this.collection.hours.forEach(function (hour) {
  hour.addEventListener('click', selectHour);
});
this.collection.minutes.forEach(function (minute) {
  minute.addEventListener('click', selectMinute);
});

To fix this, you just need to use the lastest version of the package:

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

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

    $scope.changevalue = () => {
      $scope.setUp = true;
      this.resetTime();
    }
    
    $scope.hide = () => {
      $scope.setUp = 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="https://unpkg.com/timepicker.js@3.1.0/dist/timepicker.js"></script>

<div ng-app="app">
  <div ng-controller="ctrl">
      <button name="button" ng-click="hide()">Go to another page</button>
      <button name="button" ng-click="changevalue()">Set time</button>
      <input type="text" class="form-control" id="timePicker" data-ng-if="setUp"  ng-model="hour"     autocomplete="off">
  </div>
</div>

Answered By - Cuong Le Ngoc