Angular modal close function not executing

Question

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;
};

Going to be really hard to diagnose without knowing what implementation of your `Modals` is. Are you using **ui-bootstrap**, some other 3rd party implementation, or is it custom rolled? Is this something you could put into a [Plunker](http://plnkr.co/), or [JsFiddle](https://jsfiddle.net/)? — Josh, Dec 10 '15 at 12:47
@Josh Yes I am using ui-bootstrap version 0.13.4. I can't add it too Plunker or JsFiddle - there is a lot more code behind what I have here. I will add the html of the modal — KvnH, Dec 10 '15 at 12:55
At least post the code of your Modals service - otherwise it is impossible to know what you are returning, how the close() function looks like, etc. — Michael Rose, Dec 10 '15 at 13:02
Stupid question - you have `` but the closing tag is `` - is that just a typo? — Michael Rose, Dec 10 '15 at 13:15
@MichaelRose I am not sure, I edited them to match but it makes no difference. I also forgot to say I am testing this on chrome and with an actual device - The issue only appears when running in chrome. — KvnH, Dec 10 '15 at 13:23

score 0 · Accepted Answer · edited May 23 '17 at 11:52

0

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

edited May 23 '17 at 11:52

Community

1
1

answered Dec 10 '15 at 15:02

KvnH

496
1
9
30

score 0 · Answer 2 · answered Dec 10 '15 at 16:35

Per the ui.bootstrap docs - http://angular-ui.github.io/bootstrap/versioned-docs/0.13.3/#/modal

result - a promise that is resolved when a modal is closed and rejected when a modal is dismissed

It looks like you're trying to use the wrong promise to execute your logic. result gets triggered as a product of calling $modalInstance.close or $modalInstance.dismiss. If you're trying to close your modal programmatically (as opposed to closing via ng-click within the modal template/controller) you need to call $modalInstance.close or $modalInstance.dismiss directly, then your result.then will execute.

Angular modal close function not executing

2 Answers2