diosney / angular-bootstrap-datetimepicker-directive

A wrapper directive around the bootstrap-datetimepicker component.
MIT License
69 stars 50 forks source link

TypeError: Cannot read property '$$phase' of null #33

Open tlenex opened 7 years ago

tlenex commented 7 years ago

This error is called on this line:

          $element
            .on('dp.change', function (e) {
              if (ngModelCtrl) {
                $timeout(function () {
                  ngModelCtrl.$setViewValue(e.target.value); // TypeError: Cannot read property '$$phase' of null
                });
              }
            })
            .datetimepicker(options);

I think $setViewValue should be wrapped in something like this:

  $scope.$applyAsync(function() {
    ngModelCtrl.$setViewValue(e.target.value);
  });

and if should remove listeners by $element.off with the event handler on $scope.$on('$destroy', ...)

ggobi74 commented 7 years ago

The problem is that $timeout puts a promise in $digest cycle. But when the scope which holds datetimepicker is destroyed, also does the model. So, in the end (after local scope is destroyed), $digest finds a promise and executes it. This promise calls $setViewValue on a model that dont exist anymore (its scope is destroyed). So, to solve this you should do something like this:

var promise = $timeout(...);
scope.$on('$destroy', function() {
  $timeout.cancel(promise);
  $element.off();
});

Worked for me.