CODEWITHSUNDEEP
htmlangularjs
Samuel Davidson
Samuel Davidson

Reputation: 791

Toggle ng-click attribute

I have a span with an ng-click="..." attribute. The ng-click slightly modifies the span's CSS within the DOM so that it is more button-like. Within my application I wish to toggle whether or not that span is clickable or not. I can make the ng-click not do anything easy enough but what I would prefer is to just remove/disable the attribute altogether. This is to avoid all "buttonizing" that the ng-click does to the element. It would also be nice if the attribute were re-enabled if the clickable variable becomes true again.

I would like a solution that avoids using $scope.$watches because my application is pretty large and watches are slow.

Thanks!

Upvotes: 0

Views: 158

Answers (3)

Achu
Achu

Reputation: 364

I think you can have two spans with and without ng-click attribute and based on that clickable variable you control those two spans with ng-if or ng-show

Upvotes: 2

Samuel Davidson
Samuel Davidson

Reputation: 791

Simple solution suggested by to Achu!

Just use two spans rather than toggle the attribute on a single span.

<span ng-if="clickable" ng-click="...">Click me!</span>
<span ng-if="!clickable">Cant click me!</span>

Upvotes: 1

Muhammad Adeel Zahid
Muhammad Adeel Zahid

Reputation: 17794

If I were in such a situation, I would not try to enable or disable ng-click attribute. Rather, I would use some flag variable with the $scope to see if click function should perform its functionality or not like in your controller you have a method like

$scope.spanClick = function(){
    if(!$scope.shouldClick){
       return;//simply do nothing       

    }
    //Do button click logic
}

Upvotes: 0

Related Questions