测试我是否在重定向AngularJS之前单击了一个按钮

Question

我有一个包含ng-click的div，可以重定向到另一个页面以显示详细信息，但在这个div中我有一个按钮（Follow）当我点击按钮时我应该保持在同一页面上

<div class="panel-body" style="background-color: white;" ng-click="goToFacilitatorP(facilitator.username)">
<div class="col-md-2 col-xs-2">
    <img class="img-thumbnail" data-ng-src="data:image/PNG;base64,{{facilitator.avatar}}" style="margin-top: 10px;height:120px;width:120px;" ng-show="true">
</div>
<div class="col-md-8 divtextCol">
    <h3>{{facilitator.lastname}} {{facilitator.firstname}}, {{facilitator.title}}</h3>
</div>
<div class="col-md-2" style="margin-top: 50px;">
    <button type="button" class="btn btn-link" ng-click="follow(facilitator);"><i class="fa fa-thumbs-o-up"></i> Suivre </button>
</div>

但即使我点击按钮，我也会被重定向

var redirect= false;
$scope.goToFacilitatorP= function(){
console.log("function goToFacilitatorP()")  
if(redirect == false){
    $location.path('/app/facilitatorView');
}else{
    $location.path('/app/MyFacilitatorProfil');     
}
}; 

我尝试使用变量进行测试，但它不起作用。请有人帮帮我

Answer 1

将事件传递给您的函数，并阻止其传播：

ng-click="follow(facilitator, $event)"

和

$scope.follow = function(facilitator, $event) {
    $event.stopPropagation();
    ...
}

Answer 2

为什么不删除ng-click并在下面包含2的div上重新添加2次？

<div class="panel-body" style="background-color: white;">
    <div class="col-md-2 col-xs-2" ng-click="goToFacilitatorP(facilitator.username)">
        <img class="img-thumbnail" data-ng-src="data:image/PNG;base64,{{facilitator.avatar}}" style="margin-top: 10px;height:120px;width:120px;" ng-show="true">
    </div>
    <div class="col-md-8 divtextCol" ng-click="goToFacilitatorP(facilitator.username)">
        <h3>{{facilitator.lastname}} {{facilitator.firstname}}, {{facilitator.title}}</h3>
    </div>
    <div class="col-md-2" style="margin-top: 50px;">
        <button type="button" class="btn btn-link" ng-click="follow(facilitator);"><i class="fa fa-thumbs-o-up"></i> Suivre </button>
    </div>
</div>      

旁注

我认为Bootstrap严格禁止在不直接使用表单字段时放置列的位置。 .container类的元素直接包含一个或多个.row类的元素。类.row的元素直接包含一个或多个xx-col类的元素。您不应直接将col类的元素嵌套在具有.row类的元素之外。您可以尝试使用可用于引导程序的linter来确保您遵守其布局。