Delay in class change to 'activated' when using ng-click in ionic

Question

I am using ng-click on a div element in an ionic app as such:

<div class="thediv" ng-click="showActionsheet()"><p>26</p></div>

This works well, but I have some CSS setup:

.thediv.activated {
    background-color: #d18027;
    border: 2px solid #ffc666;
}

The CSS activates if I press the div long enough, but when I just tap it nothing happens. I would also like to keep it activated until the actionsheet closes. Not sure how to go about that either...

Answer 1

I'm afraid that you can't solve the delay. That's one of the bad things of working with building hybrid mobile apps. Ionic framework is very good, but in my opinion it will never be as fast as native apps (mainly if it's not a very new-fast-modern device).

About keeping it activated, you can create a variable like $scope.isActivated and at the beginning of your method showActionsheet() give it a true . When you close the action sheet set it to false .

And in your div you can do something like

<div class="thediv" ng-click="showActionsheet()" ng-class="active: isActivated"><p>26</p></div>

In your CSS do also

.thediv.activated,
.thediv.active, {
    background-color: #d18027;
    border: 2px solid #ffc666;
}