Question

我有一个标记按钮，当用户点击时，标记讨论，然后标记按钮被文本“成功标记”替换。目前我在单击标志按钮后禁用ng-click时遇到问题。对于文本“已成功标记”，仍然存在ng-click，我想阻止对此文本的点击，以防止在标记同一讨论时出错。

HTML：

<div ng-if="canFlag(discussion)">
    <div ng-switch="isFlagging"
        ng-disabled="button_clicked"
        ng-click="do_something()"
        id="flag{{discussion.id}}"
        title="{{'flag as inappropriate'}}"
        robo-confirm="{'Are you sure you want to flag this?'}"
        class="feedActionBtn">

        <i ng-switch-when="false"
            class="icon-flag"></i>

        <div ng-switch-when="true" 
            translate translate-comment="success message">
            Successfully flagged</div>
    </div>
</div>

JS：

$scope.isFlagging = false;
$scope.button_clicked = false;
    $scope.do_something = function() {
        $scope.button_clicked = true;
        this.isFlagging = true;
    }

~~通过添加延迟评估或阻止传播，我可能会阻止调用do_something（）方法，但我也希望鼠标光标保持指针而不是更改为'点击链接'鼠标图标，这可能吗？~~看起来鼠标按钮图像是我修复的CSS问题

我也尝试过将ng-click添加到ng-switch-when语句中，如下所示，但点击后，isFlagging仍然是假的，我没有得到成功文本：

<div ng-switch-when="false"
    ng-click="do_something()"
    id="flag{{discussion.id}}"
    title="{{'flag as inappropriate'}}"
    robo-confirm="{'Are you sure you want to flag this?'}"
    class="feedActionBtn">
    <i class="icon-flag"></i>
</div>

Answer 1

您可以通过在“成功标记”div上添加ng-click="$event.stopPropagation()"来停止事件冒泡。在这种情况下，click事件不会到达父容器：

<div ng-click="$event.stopPropagation()"
     ng-switch-when="true" 
     translate translate-comment="success message">
    Successfully flagged</div>

Answer 2

也许是一个简单的条件？

``$scope.do_something = function() {
  if ($scope.button_clicked === true) {
     return;
  }
  else {
  $scope.button_clicked = true;
    this.isFlagging = true;
  }
}``

Answer 3

在ng-click中添加button_clicked是一种常见的模式

<div ng-if="canFlag(discussion)">
  <div ng-click="!button_clicked && do_something()"
    id="flag{{discussion.id}}"
    title="{{'flag as inappropriate'}}"
    robo-confirm="{'Are you sure you want to flag this?'}"
    class="feedActionBtn">
    <div ng-switch="isFlagging">
        <i ng-switch-when="false" class="icon-flag"></i>

        <div ng-switch-when="true" 
        translate translate-comment="success message">
        Successfully flagged</div>
    </div>
  </div>
</div>

如何在ng-if ng-switch语句中单击后禁用ng-click？

3 个答案: