Angular 1.6 ES6 $手表

Question

编辑/更新：

我忘记了 angular 1.6 中的原始代码（正常方式）：

我想，这可以帮到你。我的工作是在 EcmaScript ES6 中进行转换。

干得好！

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

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

}

return总是假的！

我试试这个：

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

结果就是这个错误

TypeError: Cannot read property 'ui' of undefined

另一个问题：$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);

但是你必须以箭头函数格式编写底层函数

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

Answer 2

应该是：

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

Answer 3

首先，永远不要在控制器中使用 $watch。其次，你不需要 $watch.

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

Angular 1.6 ES6 $手表

Angular 1.6 ES6 $watch

javascript

angularjs

ecmascript-6

angularjs-1.6