Angularjs - ng-click and $event.stopPropagation disable twitter bootstrap context menu

Question

Hey guys so I am trying to use $event.stopPropagation because I have many different clicks in one container that need to be independent and I handle them using $event.stopPropagation as well, but when it comes to bootstrap, I cannot for some reason make it work . The context menu click is detected as actual ng-click on the whole container. How can I make the twitter bootstrap context menu act as if it had $event.stopPropagation?

Here is a fiddle http://jsfiddle.net/GeorgiAngelov/tJY2s/

I even tried adding an ng-click event that will trigger the href='#' but it still does not work. jsFiddle with ng-click to replace the href='#' http://jsfiddle.net/GeorgiAngelov/tJY2s/1/

<div ng-app='project' ng-click="myClick()">
    <div ng-controller="MainController" ng-click="myClick($event)">
        <div>
            <div class="header" >
                dasdasdasdasd
            </div>
        </div>

        <div class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                <li><a tabindex="-1" ng-click="">One</a></li>
                <li><a tabindex="-1" ng-click="">Two</a></li>
            </ul>
        </div>
    </div>
</div>

Triptych

The problem is that bootstrap does not use angular mechanism, namely $apply/$digest cycle, to handle events. You might want to check out the angular bootstrap project: angular-ui.github.io/bootstrap. – Ceto

Ah that seems to be what I am looking for! Thanks. – Triptych

@yuxhuang, please add it as an answer so I can accept it. it worked like a charm. – Triptych

Answer 1

Bootstrap does not use Angular mechanism, namely $apply/$digest cycle, to handle events. You might want to check out the angular bootstrap project: http://angular-ui.github.io/bootstrap.

Ceto