Event bubbling seems not working when using bootstrap modal in AngularJS

Question

I got a some questions about using bootstrap modal.

First of all, sorry for my English skill, maybe there are some problems to understand my question.

I made a button as a directive to add dynamically with reference to below links.

.

Angularjs dynamically adding and removing elements using directive

http://jsfiddle.net/Stepan_Kasyanenko/4ktmvzcm/1/

^^^^^ above link is just what I consulted.

.

And my problem is in this fiddle.

.

https://jsfiddle.net/CRDeity/6kmszgL0/

.

When I put this into a modal , even though I click this, it didn't work.

If outside of modal , this worked well.

Are there any interruption in event of modal ?

Answer 1

I can give you solution.

Check this fiddle.

Directive have to use snake-case

When using directive, you have to consider snake-case using - .

<button add-item-line class="btn btn-info btn-lg">
    Add list
</button>

Answer 2

Your directive is not declared correctly. Angular uses Attribute Normalization to link Directives to Elements, because HTML is case insensitive, while JavaScript is case sensitive. (see Matching Directives for more info). The Directive 'addItemLine' and 'additemline' would be exactly the same, without this normalization.

In the HTML, you use Dash Delimited names, which are converted to their Camel Case equivalent. Therefore, to reach the 'addItemLine' Directive, you need the add-item-line Attribute.

<button add-item-line class="btn btn-info btn-lg">

Working version of your example: https://jsfiddle.net/bLanoznz/