javascript - 在 Angular 中使用 controllerAs 语法，如何观察变量？

Question

使用 AngularJS 中的标准 Controller 语法，您可以像这样观察变量:

$scope.$watch(somethingToWatch, function() { alert('It changed!'); });

使用 controllerAs 语法，我想在事件 Controller 中对这一变化使用react。最简单的方法是什么？

更多细节，如果有帮助的话。我在控制应用程序上下文(用户选择、开始时间、结束时间等)的侧 Pane 中有一个 Controller 。因此，如果用户更改为不同的上下文，主视图应该使用react并更新。我将上下文值存储在一个工厂中，每个 Controller 都在注入(inject)该工厂。

Answer 1

您始终可以使用观察者评估函数，特别有助于观察 Controller 实例或任何对象上的某些内容。实际上，您可以为此返回任何变量。

  var vm = this;
  //Where vm is the cached controller instance.
  $scope.$watch(function(){
     return vm.propToWatch;
  }, function() { 
      //Do something
  }, true);//<-- turn on this if needed for deep watch

还有一些方法可以使用绑定(bind)函数来绑定(bind)this上下文。

$scope.$watch(angular.bind(this, function(){
     return this.propToWatch;
    //For a variable just return the variable here
 }), listenerFn);

甚至 ES5 function.bind:

 $scope.$watch((function(){
     return this.propToWatch;
 }).bind(this), listenerFn);

如果您在 typescript 世界中，它会变得更短。

$scope.$watch(()=> this.propToWatch, listenerFn);

尽管您可以在 Controller ($scope.watch('ctrlAs.someProp') 中观察 Controller 别名，但它会带来几个问题:

• 它预测(或者换句话说，预先确定)在 View /路由/指令/模式或使用 Controller 的任何地方用于 Controller 的别名。它破坏了使用 controllerAs:'anyVMAlias' 的目的，这也是可读性的一个重要因素。由于使用 Controller ，您需要知道实现中定义的名称，因此很容易出现拼写错误和维护问题。

• 当您对 Controller (只是 Controller )进行单元测试时，您需要使用 Controller 内部定义的完全相同的别名再次进行测试(如果您正在编写 TDD，这可以说是一个额外的步骤)，理想情况下不应该测试 Controller 时需要。

• 使用提供针对字符串的观察器函数的观察器始终可以减少 Angular $parse(watch 用于创建表达式)在内部将字符串表达式转换为观察函数所需的一些步骤。在 $parse implementation 的 switch-case 中可以看到