javascriptangularjsui.bootstrap

Angular modal close function not executing


The loading modal is created correctly, but when the finally block is hit it does not close it. Is there any known reason for this? The loading time is minimal but I still need it for cases where there is a delay. I am testing with a device and in Chrome - The issue only arises when it is being run in Chrome.

$scope.init = function() {
  var dialog = Modals.openLoadingModal();

  OfflineManager.getTemplates().then(function(templates) {
    $scope.templates = templates.map(function(e) {
      // get e
      return e;
    });

    OfflineManager.getInspections().then(function(inspections) {
      $scope.inspections = inspections.map(function(e) {
        // get e
        return e;
      });
    }).finally(function() {
      dialog.close();
    });
  });
};

The modal view:

<div class="loadingModal">
  <data-spinner data-ng-init="config={color:'#fff', lines:8}" data-config="config"></spinner>
</div>

The modal service:

this.openLoadingModal = function(callback) {
  var opts = {
    backdrop: true,
    backdropClick: false,
    keyboard: false,
    templateUrl: 'views/modals/loading.html'
  };
  return this.open(opts, callback, null);
};


this.open = function(opts, closeHandler, dismissHandler, model) {
  opts.resolve = { modalModel:function() { return model; }};
  opts.controller = opts.controller || 'ModalController';

  $('div, input, textarea, select, button').attr('tabindex', -1);

  var modalInstance = $modal.open(opts);
  modalInstance.result.then(function(result) {
    $('div, input, textarea, select, button').removeAttr('tabindex');
    if (closeHandler) {
      closeHandler(result);
    }
  }, function(result) {
    $('div, input, textarea, select, button').removeAttr('tabindex');
    if (dismissHandler) {
      dismissHandler(result);
    }
  });
  return modalInstance;
};

Solution

  • After some searching I found the following solution which waits until the modal has finished opening before executing:

    .finally(function() {
        dialog.opened.then(function() {
          dialog.close();        
        });
    });
    

    Source: Call function after modal loads angularjs ui bootstrap