使用 $dialog 多次打开同一个对话框 [英] Opening the same dialog multiple times with $dialog

查看：24 发布时间：2021/11/10 4:08:00 angularjs angular-ui-bootstrap

本文介绍了使用 $dialog 多次打开同一个对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在回答这个问题时创建了这个plnkr 'AngularJS - 在对话框中打开控制器(动态加载模板)'.

示例应用程序所做的就是启动一个基于模板的对话框，并带有自己的控制器.对话框第一次启动时，一切都按预期进行.但是，如果我尝试重新启动对话框，在关闭对话框后，会显示模态背景但没有对话框.在 javascript 控制台中，您可以看到 $dialog.open() 返回的 promise 上的 then 方法被立即调用，但背景没有被移除，也没有错误被报道.我完全不知所措.

在angular-ui bootstrap上可以反复打开和关闭对话框文档页面.

我哪里做错了?

HTML:

<html ng-app="plnkr"><头><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 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><身体><div ng-view></div></html>

JS:

app.controller("DemoCtl", ["$scope", "$dialog", function($scope, $dialog){$scope.launch = function() {var d = $dialog.dialog({背景:真实，键盘:真的，背景点击:真实，templateUrl: "dialog.html",控制器:DialogCtl"});d.open().then(function(result) { console.log("d.open().then"); });};}]);

解决方案

我发现了问题.它与使用标签打开对话框有关.单击标签会触发位置更改.对话框通过关闭自身来处理位置更改，如下所示.

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

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

您可以在这个 plunker 中看到，如果您使用按钮，它每次都能正确打开.>

希望这有帮助！我会试着弄清楚为什么它不会在第一次中断.

编辑

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

I created this plnkr when answering this question 'AngularJS - open controller in a dialog (template loaded dynamically)'.

All the example app does is launch a dialog box based on a template, with it's own controller. The first time the dialog launches, everything works as expected. However, if I try and re-launch the dialog, after dismissing it, the modal backdrop is shown but no dialog. In the javascript console you can see that the then method on the promise returned by $dialog.open() is called immediately, but the backdrop isn't removed and no errors are reported. I'm completely baffled.

The dialog can be opened and closed repeatedly on the angular-ui bootstrap documentation page.

Where did I go wrong?

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"); });
  };
}]);

解决方案

I've found the issue. It has to do with using an <a> tag to open the dialog. Clicking on the <a> tag causes a location change to be fired. The dialog handles location change by closing itself as you can see below.

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

I'm not sure why this doesn't happen on the first click of the <a> tag, but it definitely happens on all subsequent calls.

You can see in this plunker that if you use a button, it opens correctly each time.

Hope this helps! I'll try to figure out why it doesn't break on the first time.

EDIT

The location change is actually really bad. It appears to be looping, to what I believe is the angular maximum of 10 digests. Still not sure why it doesn't do a location change on the first click.

这篇关于使用 $dialog 多次打开同一个对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使用 $dialog 多次打开同一个对话框 [英] Opening the same dialog multiple times with $dialog

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

使用 $dialog 多次打开同一个对话框 [英] Opening the same dialog multiple times with $dialog

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭