javascript - Angular 1.6 ES6 $watch - Stack Overflow

admin管理员组

文章数量:1316204

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?

Edit/ update :

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

http://codepen.io/darkiron/pen/qRJmaj

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?

• javascript
• angularjs
• ecmascript-6
• angularjs-1.6

Share Improve this question Follow edited Mar 22, 2017 at 8:17 Mistalis 18.3k1414 gold badges7777 silver badges9797 bronze badges asked Mar 13, 2017 at 15:47 darkirondarkiron 1,23422 gold badges1111 silver badges2121 bronze badges 6

• 1 1. Why $watch at all? 2. Why $timeout? 3. What do you mean by "return always false"? – a better oliver Commented Mar 13, 2017 at 16:32
• Read How to Debug Small Programs. – georgeawg Commented Mar 14, 2017 at 2:36
• See also AngularJs 1.5 - Component does not support Watchers, what is the work around? – georgeawg Commented Mar 14, 2017 at 2: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 Commented Mar 14, 2017 at 8: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 Commented Mar 14, 2017 at 9:39

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 7

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)
);

It should be:

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

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

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

本文标签： javascriptAngular 16 ES6 watchStack Overflow