Angularjs - ng-click 和 $event.stopPropagation 禁用 twitter bootstrap 上下文菜单 [英] Angularjs - ng-click and $event.stopPropagation disable twitter bootstrap context menu

问题描述

大家好，我尝试使用 $event.stopPropagation 因为我在一个容器中有许多不同的点击需要独立，我也使用 $event.stopPropagation 处理它们，但是当涉及到引导程序时，我不能出于某种原因让它工作.上下文菜单单击被检测为对整个容器的实际 ng-click.我怎样才能让 twitter 引导上下文菜单表现得好像它有 $event.stopPropagation 一样?

这是一个小提琴 http://jsfiddle.net/GeorgiAngelov/tJY2s/

我什至尝试添加一个 ng-click 事件来触发 href='#' 但它仍然不起作用.jsFiddle 用 ng-click 替换 href='#' http://jsfiddle.net/GeorgiAngelov/tJY2s/1/

<div ng-controller="MainController" ng-click="myClick($event)"><div><div class="header" >达斯达斯达斯达斯

<div class="下拉菜单"><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="">两个</a></li>

解决方案

Bootstrap 不使用 Angular 机制，即 $apply/$digest 循环来处理事件.您可能想查看 angular bootstrap 项目:http://angular-ui.github.io/bootstrap.

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>

解决方案

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.

这篇关于Angularjs - ng-click 和 $event.stopPropagation 禁用 twitter bootstrap 上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！