Angular 1.6 ES6 $手表

Question

编辑/更新:

我在角度1.6(正常方式)中忘记了原始代码:

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

我想,这可以帮助你.我的工作是转换为EcmaScript ES6.

---

谁工作得很好!

如何$watch在ES6 Angular控制器中使用？

  loginaction(){

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

我试试这个,结果不是预期的

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

}

总是假的!

我试试这个:

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

结果是这个错误

TypeError:无法读取未定义的属性'ui'

另一个问题:$watch不应该在Contoller构造函数中设置该函数？

Answer 1

您直接调用函数而不是在第二个参数中传递函数引用.

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

要么

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

你也可以用一种非常简单的形式写出来

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

但是你必须用Arrow函数格式编写底层函数

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