同一对话框中多次使用$打开对话框 [英] Opening the same dialog multiple times with $dialog
问题描述
我创建这plnkr 回答这个问题<一个时href=\"http://stackoverflow.com/questions/16886356/angularjs-open-controller-in-a-dialog-template-loaded-dynamically/16887046#16887046\">AngularJS - 在一个对话框打开控制器（模板动态加载）
所有示例应用所做的就是推出基于模板的对话框，用它自己的控制器。第一次对话启动后，一切正常。不过，如果我尝试重新启动对话框，驳回后，模态背景显示，但没有对话。在JavaScript控制台中，你可以看到然后由 $ dialog.open（）返回的承诺方法被调用随即，但背景不会删除，并没有错误报告。我完全莫名其妙。
该对话框可以打开和对角UI引导文档页面
我没有去哪儿错了？
HTML：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=plnkr＆GT; ＆LT; HEAD＆GT;
＆LT;链路数据需要=引导，CSS @ *数据semver =2.3.2的rel =stylesheet属性HREF =// netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap -combined.min.css/＆GT;
＆所述;脚本数据需要=angular.js@1.0.7数据semver =1.0.7SRC =HTTP：//$c$c.angularjs.org/1.0.7/angular.min.js ＆GT;＆LT; / SCRIPT＆GT;
＆所述;脚本数据需要=ui-bootstrap@0.3.0数据semver =0.3.0SRC =http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3。 0.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT; ＆LT;身体GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
JS：
app.controller（DemoCtl，[$范围，$对话框功能（$范围，$对话）{
$ scope.launch =功能（）{
变种D = $ dialog.dialog（{
背景：真实，
键盘：真实，
backdropClick：真实，
templateUrl：dialog.html
控制器：DialogCtl
}）; d.open（），然后（功能（结果）{执行console.log（d.open（）呢。）;}）;
};
}]）;
我已经找到了问题。它与使用＆LT做;一＆GT; 标签来打开对话框。点击＆LT; A＆GT; 标记导致位置更改为被解雇。该对话框通过关闭本身处理的位置变化，你可以看到下面。
this.handleLocationChange =功能（）{
self.close（）;
};
我不知道为什么，这不会对＆LT的第一次点击发生; A＆GT; 标签，但是它在所有后续调用肯定会发生
您可以在此 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.
这篇关于同一对话框中多次使用$打开对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
