相关疑难解决方法(0)

这是一个例子.假设我希望像许多网站一样覆盖图像.因此,当您单击缩略图时,整个窗口上会出现黑色叠加层,并且图像的较大版本将居中.点击黑色叠加层即可解散它; 单击图像将调用显示下一个图像的功能.

html:

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage()"/>
</div>

javascript:

function OverlayCtrl($scope) {
    $scope.hideOverlay = function() {
        // Some code to hdie the overlay
    }
    $scope.nextImage = function() {
        // Some code to find and display the next image
    }
}

问题是,这种设置,如果你点击图片,都nextImage()与hideOverlay()被调用.但我想要的只是nextImage()被召唤.

我知道你可以在这个nextImage()函数中捕获和取消事件,如下所示:

if (window.event) {
    window.event.stopPropagation();
}

...但我想知道是否有更好的AngularJS方法,不需要我使用此片段为叠加层内的元素添加所有函数的前缀.

我有这样的HTML结构:

<div ng-click="test()">
    <div id="myId" ng-click="test2()"></div>
    <div></div>
    ...
</div>

目前,当我点击div带有id时,myId两个函数都会被触发,但我希望只是test2触发函数.我怎样才能做到这一点？

我在插件jOrgChart的div中有一个twitter bootstrap下拉列表.

我遇到的问题是,当我单击按钮打开下拉菜单时,它还会触发父div中的单击事件,该事件会执行其他元素的折叠.

这是我的HTML:

<div id="chart">
<div class="node">
    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Actions
        <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" style="text-align:left;">
            <li><a href="#">Edit</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
    </div>
</div>

<div class="node">
...
</div>

我想阻止点击a.dropdown-toggle从冒泡到div.node,我尝试了这个:

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
            e.stopPropagation();
        });

但现在下拉列表不起作用.

编辑

这是具体案例:http://jsfiddle.net/UTYma/2/ (感谢Joe Tuskan开始小提琴)

<div ng-click="process1()" id="1">
    <div ng-click="process2()" id="2">
    </div>
</div>

当我点击id为2的div时,它将触发process1和process2,我怎样才能触发process2？