Angular 1.6 ES6 $watch答案

【问题标题】：Angular 1.6 ES6 $watchAngular 1.6 ES6 $watch
【发布时间】：2017-03-13 15:47:44
【问题描述】：

编辑/更新：

我忘记了 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);
        }
    };

}

返回总是假的！

我试试这个：

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

结果就是这个错误

TypeError：无法读取未定义的属性“ui”

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

【问题讨论】：

1.为什么是$watch？ 2. 为什么$timeout？ 3.“return always false”是什么意思？
阅读How to Debug Small Programs。
另见AngularJs 1.5 - Component does not support Watchers, what is the work around?
@zeroflagL 使用$watch 对变量 ui.shake (who was boolean) 进行竞价。 `$timeout` 用于等待 css 动画 Angular 比 html 快
Angular 1.5 提供$onChanges，比$watch 更可取。另一个重要的一点是变化的原因。如果例如通过单击可以收听该事件的按钮来更改该值。至于$timeout：你可以看看$animate，它可以在动画结束时调用函数。无论如何，如果你想保持原样，你需要用箭头函数替换function(){ this.ui.shake = false;，因为this不是这里的控制器。

标签： javascript angularjs ecmascript-6 angularjs-1.6

【解决方案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)
);

【讨论】：

【解决方案2】：

应该是：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：