All geek questions in one place

Opening the same dialog several times with $ dialog

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

The entire application example is launching a dialog box based on a template with its own controller. At the first start of the dialog, everything works as expected. However, if I try and restart the dialogue, a modal background will appear after it is dismissed, but there is no dialogue. In the javascript console, you can see that the then method in the promise returned by $dialog.open() is called immediately, but the background is not removed and no error messages are reported. I am completely puzzled.

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

Where am I 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.imtqy.com/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"); }); }; }]);
+4
source share
3 answers

I found a problem. This is due to the use of the <a> tag to open a dialog. When you click on the <a> tag, the location changes. The dialog handles the change of location, closing itself, as you can see below.

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

I'm not sure why this does not happen the first time the <a> tag is clicked, but it definitely happens on all subsequent calls.

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

Hope this helps! I will try to understand why it does not break for the first time.

EDIT

The change of location is actually really bad. This seems to be a loop, and I believe that angular has a maximum of 10 digests. Still not sure why he is not making a location change on the first click.

+7
source

It looks like if you put "javascript :;" in href, then it works fine for the <a> tag.

Like this:

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

Also, <a> The problem with the tag seems to be related to the browser.

0
source

The problem with the tag. Jason mentioned that he expected the angular directive to stop the change of location. This is true, but the href needs to be empty. pluker was

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

and should have

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

When I changed the plunker this way, everything seemed fine

0
source

Source: https://habr.com/ru/post/1484649/

More articles:


All Articles