$timeout not changing variable in angularjs

Question

I am working on a button and trying to shake it on clicking it if the form fields above it are invalid.

Here is my code for the controller :-

if(valid){.. do valid stuff here ..}

else{
console.log(this.shakeNotValid);
        // SHAKE ANIMATION
        this.shakeNotValid = true;

        $timeout(function() {
            this.shakeNotValid = false;
        } , 500);
}

No where else is this.shakeNotValid is defined or assigned.

The console line returns me undefined for the first time and the button shakes but subsequently it keeps returning me true again and again and doesnt shake.

In the html I am assigning a class to the button like this :-

        <div ng-click="main.mClick()" 
        ng-class="{isDisabled: !main.isValidContact && main.showContactCard, 
        isShaking: main.shakeNotValid}">

What I want is that this button can shake multiple times until all becomes valid as and when the user clicks.

Some help please, thanks !

SkyWriter · Accepted Answer · 2015-05-14 10:20:16Z

2

I believe that this in this.shakeNotValid = true and this in this.shakeNotValid = false are two different objects.

If I were you, I'd try to change your code the following way and try it out:

if(valid){.. do valid stuff here ..}

else {
        _this = this;  
        console.log(_this.shakeNotValid);
        // SHAKE ANIMATION
        _this.shakeNotValid = true;

        $timeout(function() {
            _this.shakeNotValid = false;
        } , 500);
}

answered May 14, 2015 at 10:20

SkyWriter

1,46910 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SkyWriter Over a year ago

It might also be useful to read about this binding, as it is exactly the case we're facing here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . It shows the way these issues can also be addressed and gives better understanding of why your variant didn't work.

Collectives™ on Stack Overflow

$timeout not changing variable in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related