Home Ask Login Register

Developers Planet

Your answer is one click away!

Marek February 2016

UI Bootstrap modal in directive- multiple modals but only one opens

As seen in this Plunkr, I have two modals, each in separate directive of modal-one and modal-two.

The problem is, that only modal one is being opened, even when clicking on modal two button.

I guess that it has something to do with the .open method on the $scope is overwritten?

How do I prevent it? Thank you!


Pankaj Parkar February 2016

Basically behind the scene you are sharing a single scope amongest both the directive, as you don't have scope property inside directive, it sets to false(it will share up the scope). So when first directive gets loaded it registers $scope.open method with popup code. And when the other directive renders it takes same scope and override $scope.open method.

You could easily fix this issue by making your directive scope to use scope: true / scope: {}

Working Demo

Else you could share the same scope, but then you need to change the method name in one of two directive.

Other Demo

Post Status

Asked in February 2016
Viewed 3,028 times
Voted 9
Answered 1 times


Leave an answer

Quote of the day: live life