So verhindern Sie Schaltflächenklick von reduzierenden Bereich

Question

Ich habe ein UI-Bootstrap-Bereich (Header & Körper) mit einer Schaltfläche in der Kopfzeile. Wenn Sie auf den Kopfbereich klicken, sollte der Hauptteil minimiert werden. Ein Klick auf den Button sollte nur ein Popup-Fenster aktivieren. Wenn Sie auf diese Schaltfläche klicken, wird das Fenster leider ebenfalls ausgeblendet. Ich vermute, dass der Bereich hinter der Schaltfläche den Klick irgendwie erfasst. Wie kann ich das verhindern?

Hier ist der Plunker: 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

Das Problem ist, das Click-Ereignis wird das DOM von der <span> ausbreitende oben. Sie können eine $event.stopPropagation() Ihrer ng-click Richtlinie hinzufügen. (Einige Leute mögen das nicht, weil sie es „dirty“ fühlen solchen Code in eine Richtlinie hinzufügen, damit Sie immer $event als Parameter auf vm.onClickBtn() passieren könnte und rufen .stopPropagation() in dem Controller.)

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

Answer 2

Am inneren ng-click stoppen Sie einfach die Ereignisblasen, indem Sie stopPropagation auf $ event object aufrufen.

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

Demo here