Open a bootstrap modal with a directive in angular 1.2

All we need is an easy explanation of the problem, so here it is.

I’m using angular-ui bootstrap to show modal windows. I’d like to turn this into a directive that would let me pull content from the server and display it in a modal or popover…

For example: <a a-infobox="modal" href="#/content/one" rel="nofollow noreferrer noopener">A link</a> should get the content from the href and pull it into a modal window.

I pulled together a plunkr: The first link has the a-infobox attribute. When I click on it no dialog shows up. In the console you can see that it was called.

When I click on the second link which is called from a controller, it opens the second dialog. Then when I click the button on that modal, it disappears and the dialog from the first click is right behind it.

I’m just starting to dig into directives and am sure I’m missing something fundamental.
Thanks in advance.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I found a solution…it appears that the modal needs to be applied so angular will process it on the next digest.

A simple line: scope.$apply($rootScope.dlg); is all it took.

The plunker was updated accordingly.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply