Follow download link and dismiss modal?

Question

I have inherited a GUI written with Angular, and at the moment I don't even know enough to trim it down to a fiddle. So I'm hoping this is more straightforward than it appeared on a quick Google.

I have a modal dialog created using Bootstrap that is basically the same as the live demo here: http://getbootstrap.com/javascript/

A copy of the source from that link:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The main difference in my case is that the "Save Changes" button is actually a link - to a resource which is downloaded without leaving the page. It looks like this:

<a ng-href="{{downloadUrl}}" class="btn btn-primary">Download</a>

My goal is to have the above modal dialog dismissed when the link is clicked, while still downloading the file. If I use data-dismiss, the download doesn't happen.

If I need to go digging around the code, that's fine, but I'm hoping there's a simple change to the template that will do the trick. Any suggestions?

Answer 1

First, when using with AngularJS 1.x, always use Bootstrap UI.

---

When using Bootstrap UI's $uibModal, it is way easier to manipulate the modal, and pass data between the view and the modal. The reason the link does not work, is because the modal should be closed first.

You can create a simple function which replaces href or ng-href: It closes the modal first, and goes to the link second.

And, remember, please do not use jQuery, and always try to use AngularJS dependencies like $window instead of window, when they're available. This also goes for onclick. always use ng-click, and handle the logic in your controller.

---

In your template, add the controller, and an ng-click-attribute:

<div ng-controller="MyCtrl as $ctrl">
    <a href target="_blank" class="btn btn-primary" ng-click="$ctrl.go('#/some/url')"> Go </a>
</div>

In your controller, add the logic, for closing the modal, and following the link:

app.controller('MyCtrl', function($uibModalStack, $window) {
    this.go = function(path) {
        $uibModalStack.dismissAll();
        $window.location.href = path;
    }
})

Answer 2

You have to close the modal yourself. Here is a bootstrap.js only solution without angular. In angular you would open the modal with angular-bootstrap and close it also that way.

<a ng-href="some-reosource-url" target="_blank" class="btn btn-primary" onClick="closeModal()">Download</a>

function closeModal() {
  $('#myModal').modal('hide');
}

http://plnkr.co/edit/0sRb5VdT9isEFdJ66Rxe?p=preview

Answer 3

Here's a working Plunker.

JS

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

app.controller('MainCtrl', function($scope) {
  $scope.hideAndDownload = function() {
    $('#myModal').modal('hide');

    var link = document.createElement("a");
    link.download = "data:text/html";
    link.href = "http://code.jquery.com/jquery-1.11.3.min.js";
    link.click();
  }
});

Markup

        <button type="button" class="btn btn-primary" ng-click="hideAndDownload()">Save changes</button>