在 Angular 中使用 controllerAs 语法，如何监视变量？

Question

使用 AngularJS 中的标准控制器语法，您可以观察如下变量：

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

使用 controllerAs 语法，我想在活动控制器中对这一变化做出反应。最简单的方法是什么？

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

Answer 1

您始终可以使用观察器求值器函数，特别有助于观察控制器实例或任何对象上的某些内容。实际上，您可以 return 任何变量。

  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

还有一些方法可以使用绑定函数来绑定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);

如果你在打字稿世界，它会变得更短。

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

尽管您可以在控制器内查看控制器别名 ($scope.watch('ctrlAs.someProp')，但它会带来一些问题：

它预测（或换句话说，预先确定）在 view/route/directive/modal 或任何使用控制器的地方使用的控制器别名。它破坏了使用 controllerAs:'anyVMAlias' 的目的，这也是可读性的一个重要因素。由于使用控制器，您需要知道实现中定义的名称，因此很容易出现拼写错误和维护问题。
当您对控制器（只是控制器）进行单元测试时，您需要使用控制器内部定义的完全相同的别名再次进行测试（如果您正在编写 TDD，这可能是一个额外的步骤），理想情况下在测试控制器时不需要。
使用提供针对字符串的观察器函数的观察器总是减少 angular $parse（watch 用于创建表达式）在内部将字符串表达式转换为 watch 函数的一些步骤。可以在 $parse implementation

在 Angular 中使用 controllerAs 语法，如何监视变量？

Using controllerAs syntax in Angular, how can I watch a variable?

javascript

angularjs

angularjs-controller