如何防止按钮单击折叠窗格

Question

我有一个 ui-bootstrap 窗格（header 和 body），在 header 上有一个按钮。单击 header 区域应该会折叠 body。单击该按钮应该只会激活一个警报弹出窗口。不幸的是，单击该按钮也会折叠窗格。我怀疑按钮后面的窗格以某种方式捕获了点击。我怎样才能避免这种情况？

这是傻瓜： http://plnkr.co/edit/teCnC7KtvlQtosZurlqD?p=preview

<div class="panel panel-primary">
<div class="panel-heading" ng-click="vm.onClickHeader()">
    <span ng-hide="vm.collapsed" style="padding-top: 8px">
        <span ng-click="vm.onClickBtn()"><i class="fa fa-chevron-left fa-2x"></i></span>
    </span>
</div>

<div class="panel-body" ng-hide="vm.collapsed" style="padding: 2px; padding-right: 4px">
    <div>Click the button above to hide me!</div>
</div>
</div>


var app = angular.module('app');

app.directive('myPanel', MyPanel);
function MyPanel() {
    return {
        templateUrl: 'my-panel.html',
        restrict: 'E',
        controller: MyController,
        controllerAs: 'vm',
        scope: true
    };
};


function MyController() {
    this.collapsed = false;

    this.onClickBtn = function onClickBtn() {
        alert('click!')
    };

    this.onClickHeader = function(evt) {
        this.collapsed = !this.collapsed;
    }

}

Answer 1

问题是点击事件从 <span> 向上传播 DOM。您可以将 $event.stopPropagation() 添加到 ng-click 指令。（有些人不喜欢这样，因为他们觉得将这样的代码添加到指令中是 "dirty"，因此您始终可以将 $event 作为参数传递给 vm.onClickBtn() 并调用 .stopPropagation()在你的控制器中。）

<span ng-click="vm.onClickBtn(); $event.stopPropagation();"><i class="fa fa-chevron-left fa-2x"></i></span>

Answer 2

在内部 ng-click 上，只需在 $event 对象上调用 stopPropagation 来停止事件冒泡。

<span ng-click="vm.onClickBtn();$event.stopPropagation()">
   <i class="fa fa-chevron-left fa-2x"></i>
</span>

Demo here

如何防止按钮单击折叠窗格

How to prevent button click from collapsing pane

javascript

angularjs

angular-ui-bootstrap