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, or JsFiddle? — Josh
– Josh, Commented Dec 10, 2015 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
– KvnH, Commented Dec 10, 2015 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
– Michael Rose, Commented Dec 10, 2015 at 13:02
Stupid question - you have <data-spinner ...> but the closing tag is </spinner> - is that just a typo? — Michael Rose
– Michael Rose, Commented Dec 10, 2015 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
– KvnH, Commented Dec 10, 2015 at 13:23

Community · Accepted Answer · 2017-05-23 11:52:23Z

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, 2017 at 11:52

CommunityBot

11 silver badge

answered Dec 10, 2015 at 15:02

KvnH

5061 gold badge9 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jusopi · Accepted Answer · 2015-12-10 16:35:30Z

0

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.

answered Dec 10, 2015 at 16:35

jusopi

6,8133 gold badges37 silver badges44 bronze badges

Collectives™ on Stack Overflow

Angular modal close function not executing

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related