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

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>

Answer 2

首先，在使用AngularJS 1.x时，请始终使用Bootstrap UI。

使用Bootstrap UI＆＃39; String pattern = "dd, MMM, EEE"; System.out.println(DateTimeFormatter.ofPattern(pattern).format(LocalDateTime.now())); // java 8 System.out.println(new SimpleDateFormat(pattern).format(new Date())); // java 7 and lower时，操作模态更容易，并在视图和模态之间传递数据。链接不起作用的原因是因为首先要关闭模态。

您可以创建一个替换$uibModal或href的简单函数：它先关闭模式，然后转到第二个链接。

并且，请记住，请不要使用jQuery ，并且当它们可用时，总是尝试使用ng-href而不是$window等AngularJS依赖项。这也适用于window。始终使用onclick，并处理控制器中的逻辑。

在模板中，添加控制器和ng-click - 属性：

ng-click

在你的控制器中，添加逻辑，关闭模态，然后点击链接：

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

Answer 3

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

Follow download link and dismiss modal?

3 个答案: