Angular 1.6 ES6 $watch

Question

Edit/ update :

I forgot my original code in angular 1.6 (normal way) :

I think, this can helpe you. My job is convert in EcmaScript ES6.

who work great !

How to use $watch in ES6 Angular controller ?

  loginaction(){

    this.$scope.$watch('ui.shake', this.resetUiCheck());
    ....
 }

I try this, the result is not expected

resetUiCheck(newValue, oldValue){    
    console.log(this.ui.shake);
    return () => {
        alert('foo');
        console.log(this);
        if(this.ui.shake == true){
            this.$timeout(function(){
                this.ui.shake = false;
            }, 1000);
        }
    };

}

return always false!

I try this:

this.$scope.$watch('ui.shake', this.resetUiCheck);

And the result is this error

TypeError: Cannot read property 'ui' of undefined

Another question: the $watch function should not be set in the Contoller constructor?

1. Why `$watch` at all? 2. Why `$timeout`? 3. What do you mean by _"return always false"_? — a better oliver, Mar 13 '17 at 16:32
Read [How to Debug Small Programs](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/). — georgeawg, Mar 14 '17 at 02:36
See also [AngularJs 1.5 - Component does not support Watchers, what is the work around?](http://stackoverflow.com/questions/35534479/angularjs-1-5-component-does-not-support-watchers-what-is-the-work-around/35535336#35535336) — georgeawg, Mar 14 '17 at 02:39
@zeroflagL use `$watch` to biding the variable ui.shake (who was boolean) . ` $timeout` for wait the and of css animation Angular is faster than html — darkiron, Mar 14 '17 at 08:12
Angular 1.5 offers `$onChanges`, which is preferable to `$watch`. Another important point is the reason of change. If e.g. the value is changed by clicking on a button you can listen to that event. As for `$timeout`: You can take a look into `$animate` that can call functions when the animation ends. Anyway, if you want to keep things as they are you need to replace `function(){ this.ui.shake = false;` with an arrow function, because `this` is not the controller here. — a better oliver, Mar 14 '17 at 09:39

Pankaj Parkar · Accepted Answer · 2018-09-20T17:04:06.347

You are directly calling function instead of passing function reference in 2nd parameter.

this.$scope.$watch('ui.shake',this.resetUiCheck.bind(this));

OR

this.$scope.$watch('ui.shake', (newValue, oldValue) => 
   this.resetUiCheck( newValue, oldValue)
);

you can also write it in a very simple form

this.$scope.$watch('ui.shake', this.resetUiCheck);

But then you have to write underlying function in Arrow function format

resetUiCheck = (newValue, oldValue) => 
   this.resetUiCheck( newValue, oldValue)
);

score 2 · Answer 2 · answered Mar 13 '17 at 15:51

2

It should be:

this.$scope.$watch('ui.shake', this.resetUiCheck)

answered Mar 13 '17 at 15:51

Abhishek

1,477
1
10
18

score 1 · Answer 3 · answered Mar 22 '17 at 10:45

1

First, never use $watch in controllers. Second, you don't need $watch.

$scope.ui.shake = true;
$timeout(function(){
    $scope.ui.shake = false;
}, 1000);

answered Mar 22 '17 at 10:45

evoratec

59
1
3

Angular 1.6 ES6 $watch

3 Answers3