javascript - 观察 Controller 变量，将其设置为 this 而不是 $scope，可能吗？馊主意

Question

我正在努力理解 Angular 中的 this 的概念。我一直在阅读 'this' vs $scope in AngularJS controllers 中很好地解释的差异。 但我仍然怀疑这在许多情况下是否有用。

我创建了一个 Controller 和一个 this.the_value var

angular.module("TheApp", [])
    .controller("TheCtrl", ["$scope", function($scope){
         this.the_value = "Init value";
}]);

现在我喜欢这里的概念，因为我可以编写 ng-controller="TheCtrl as myCtrl" 并通过 myCtrl.the_value 引用 View 中的值。 我在处理嵌套 Controller 时分离上下文，这很好。

然后我意识到我需要通过 $scope.$watch 来观察这个变量。

现在我要么必须重写所有 View 代码并将 the_value 移动到 $scope 而不是 this 这样我就可以使用

 $scope.$watch("the_value", function(newValue, old ){
        console.log("The old value: '"+old+"', the new value: '"+newValue+"'");
    });

或者做一些令人讨厌的事情，比如

   $scope.$watch("myCtrl.the_value", function(newValue, old ){
        console.log("This: The old value: '"+old+"', the new value: '"+newValue+"'");
    });

这是邪恶的，因为我正在创建对 Controller 名称的 View 别名的依赖。如果我重构 View 别名，这就会中断。 (即使是单元测试也会因为这种依赖而变得肮脏)

this 的用途是否非常有限，还是我弄错了？当我向代码添加新行为时，我最初开始使用 this 的所有地方都变成了 $scope。

Answer 1

如果您使用此功能，您可以监视将函数作为第一个参数传递给 $scope.$watch 的一级变量

$scope.watch(

  function() {
    return this.the_value; //this is the real variable to be watched
  }.bind(this), //binding allows to use 'this' inside function

  function(newVal, oldVal) {
    console.log(newVal, oldVal); //this is the callback
  }

);