CODEWITHSUNDEEP
angular-ui-bootstrap
Alan Savage
Alan Savage

Reputation: 842

Modal window in AngularJS does not open on first click

Please see the plunkr code demonstrating an issue I am seeing with the modal service in AngularJS.

Basically, I have moved the HTML contents for the modal window into a separate file, now when the button is clicked the backdrop appears but the modal window does not - on the first click.

If you then press escape to dismiss the backdrop and then click the button the modal window appears.

I am assuming that this is because the file is not loaded the first time when I click the button-but if so how do I use the templateUrl property to enable me to store the content for the modal window in a separate file?

Thanks for your help on this.

Upvotes: 1

Views: 1661

Answers (1)

Alan Savage
Alan Savage

Reputation: 842

The issue does appear to be due to the separate file specified in the templateUrl not yet having been downloaded when the first click happens and I have now been able to work out a solution by adding the following line into the index.html file:

<div ng-include="'mymodalcontent.html'"></div>

This directive adds a reference to the file which loads the templateUrl so that when the button is clicked the first time the modal window will appear as expected.

Please note the value in the ng-include attribute has to have single quotes in order to work as detailed in the documentation for the ng-include directive. This detail is mentioned in the section named arguments and advises:

If the source is a string constant, make sure you wrap it in quotes

I have updated the plunkr code to include the fix.

The only downside to this is the original purpose behind moving the modal window contents into a separate file was to only download the contents if the user clicked the button thus saving bandwidth for users accessing the site on a mobile device.

Upvotes: 6

Related Questions