Initially in my code, I check if a user has the ability to flag a discussion. If they do, I use ng-switch where upon flagging, a success message is displayed:
<div ng-if="canFlag(discussion)">
<div ng-switch="isFlagging"
ng-click="flagDiscussion(discussion.id)">
<i ng-switch-when="false"
class="icon-flag"
aria-hidden="true"></i>
<div ng-switch-when="true"
ng-click="$event.stopPropagation()"
>Flagged successfully</div>
</div>
</div>
I am looking to make some modifications to my code by placing the ng-click within the false condition of ng-switch and removing stopPropagation as follows:
<div ng-if="canFlag(discussion)">
<div ng-switch="isFlagging">
<div ng-switch-when="false"
ng-click="flagDiscussion(discussion.id)">
<i class="icon-flag" aria-hidden="true"></i>
</div>
<div ng-switch-when="true">Flagged successfully</div>
</div>
</div>
In the initial code, ng-switch triggers after ng-click, whereas in the revised code, ng-switch remains false even after being clicked on. The isFlagging status changes to 'true' within the flagdiscussion method. However, after clicking the flag button, it still appears unchanged.
I came across a similar post AngularJs: why doesn't ng-switch update when I use ng-click? suggesting the addition of x.isFlagging to the switch statement and setting this.isFlagging = true after the click event. Yet, upon implementing these suggestions, the flag button no longer seems to be visible.
Any insights into why this behavior is occurring?
Here is the associated JavaScript code snippet:
$scope.flagDiscussion = function(id) {
service.flagDiscussion(id);
this.isFlagging = true;
};