使用 $dialog 多次打开同一个对话框答案

【问题标题】：Opening the same dialog multiple times with $dialog使用 $dialog 多次打开同一个对话框
【发布时间】：2014-09-19 21:44:52
【问题描述】：

我在回答“AngularJS - open controller in a dialog (template loaded dynamically)”这个问题时创建了this plnkr。

示例应用所做的只是启动一个基于模板的对话框，并带有它自己的控制器。对话框第一次启动时，一切都按预期工作。但是，如果我尝试重新启动对话框，在将其关闭后，会显示模态背景但没有对话框。在javascript控制台你可以看到$dialog.open()返回的promise上的then方法被立即调用了，但是背景没有被移除，也没有报错。我完全迷惑了。

对话框可以在angular-ui bootstrapdocumentation page上反复打开和关闭。

我哪里做错了？

HTML：

<!DOCTYPE html>
<html ng-app="plnkr">

  <head>
    <link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
    <script data-require="ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-view></div>
  </body>

</html>

JS：

app.controller("DemoCtl", ["$scope", "$dialog", function($scope, $dialog){
  $scope.launch = function() {
    var d = $dialog.dialog({
      backdrop: true,
      keyboard: true,
      backdropClick: true,
      templateUrl: "dialog.html",
      controller: "DialogCtl"
    });

    d.open().then(function(result) { console.log("d.open().then"); });
  };
}]);

【问题讨论】：

我分叉了你的 plunker 并更新了它，但无法解决问题。 plnkr.co/edit/E6KCrZZflP8zap3F180H 似乎一旦 _open 在第一次打开后被设置为 false，它就永远不会被重置为打开
希望有人能够让我们知道发生了什么。我同意有些东西没有正确设置，但肯定不是很明显。

标签： angularjs angular-ui-bootstrap

【解决方案1】：

我找到了问题。它与使用<a> 标签打开对话框有关。单击<a> 标记会触发位置更改。该对话框通过关闭自身来处理位置更改，如下所示。

  this.handleLocationChange = function() {
    self.close();
  };

我不确定为什么在第一次点击 <a> 标记时不会发生这种情况，但它肯定会在所有后续调用中发生。

您可以在此plunker 中看到，如果您使用按钮，则每次都能正确打开。

希望这会有所帮助！我会试着弄清楚为什么它不会在第一次就坏掉。

编辑

位置变化其实很糟糕。它似乎是循环的，我认为是 10 个摘要的最大角度。仍然不确定为什么它在第一次点击时没有进行位置更改。

【讨论】：

很好——你刚刚让我的强迫症免于在接下来的一个小时里搞砸这个。
很奇怪，出于某种原因，我认为 ng-click 阻止了锚点触发位置更改事件。为什么在这里使用锚来触发 ng-click 中断，而在其他情况下却没有？因为我们正在使用路由？
我对 ng-click 也有同样的想法。就像我在编辑中所说的那样，它不会多次触发 locationStateChange。可能更深一些，但我还没有进一步调查
我在这个问题上浪费了几个小时 - 不得不将 angular-ui.github.io/bootstrap 上 Dialog 示例的本地工作版本中的每一小块拼图添加到我的场景中。最终发现在锚标记中有一个 href="#" 导致它 - href="" 似乎工作正常。
@Jason 得到“400 www.plnkr.co 目前已停止”

【解决方案2】：

看起来如果你把“javascript:;”在 href 中，那么它适用于标记。

像这样：

<a href="javascript:;" ng-click="launch()">Open the dialog</a>

另外，标签问题似乎与浏览器有关。

【讨论】：

【解决方案3】：

问题确实出在标签上。 Jason 提到他希望 angular 指令会停止位置更改。是这样，但它需要 href 为空白。那个笨蛋是

<a href="javascript:;" ng-click="launch()">Open the dialog</a>

应该是

<a href="" ng-click="launch()">Open the dialog</a>

当我把 plunker 改成那个效果时，一切似乎都很好

【讨论】：