CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangular-ui-bootstrapangular-ui
Marek
Marek

Reputation: 316

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!

Upvotes: 4

Views: 655

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

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

Upvotes: 3

Related Questions