How can I disable an ng-click after a click inside a ng-if ng-switch statement?

Question

I have a flag button that when a user clicks on, flags the discussion, and afterwards the flag button is replaced with text 'successfully flagged'. Currently I am having trouble from disabling ng-click after clicking the flag button. ng-click still exists for the text 'successfully flagged' and i want to block clicks on this text to prevent errors on flagging the same discussion.

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;
    }

By adding a lazy evaluation or by preventing propagation, I might be able to block the do_something() method from being called, but I am also looking to have the mouse cursor remain a pointer and not change to a 'click link' mouse icon, would this be possible? Looks like the mouse button image was a css issue i fixed

I've also tried just adding the ng-click to the ng-switch-when statement, such as the below, but after click, isFlagging is still false and I don't get the success text:

<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>

Possible duplicate of [Disable ng-click on certain conditions of application for all types of element](http://stackoverflow.com/questions/23194477/disable-ng-click-on-certain-conditions-of-application-for-all-types-of-element) — Luca, Jul 25 '16 at 17:42

score 1 · Answer 1 · answered Jul 25 '16 at 17:41

1

You can stop event bubbling by adding ng-click="$event.stopPropagation()" on "Successfully flagged" div. In this case click event will not reach parent container:

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

answered Jul 25 '16 at 17:41

dfsq

191,768
25
236
258

Hey @dfsq, this works, but is there any way to prevent the mouse icon from changing into the click the link icon when doing this? – chonglawr Jul 25 '16 at 17:47

score 0 · Answer 2 · answered Jul 25 '16 at 17:44

0

Perhaps a simple conditional?

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

answered Jul 25 '16 at 17:44

GeneralBear

1,011
3
11
35

just tried, doesn't work :( , the ng-switch is still picking up the ng-click – chonglawr Jul 25 '16 at 17:51

Emiliano Barboza · Answer 3 · 2016-07-25T23:42:22.103

0

Adding the button_clicked in the ng-click is a common pattern

<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>

edited Jul 25 '16 at 23:42

answered Jul 25 '16 at 20:26

Emiliano Barboza

475
4
11

Just tried this, unfortunately I'm not sure why after clicking the button it doesn't register the ng-switch conditionality, so now the success message is not even seen at all – chonglawr Jul 25 '16 at 23:20
Try to move the ng-switch inside as I did in the previous code – Emiliano Barboza Jul 25 '16 at 23:43

How can I disable an ng-click after a click inside a ng-if ng-switch statement?

3 Answers3