在 AngularJS 的上下文中，'this' 真的是对“$scope”的引用吗？

Question

我对超级英雄框架 AngularJS 很陌生，所以请原谅我的菜鸟！因此，当我尝试开发一个简单的 SPA 以允许管理员通过一个充满选择复选框的表格来更改我网站中其他用户的权限时，我遇到了一个问题。我定义了$scope.checked，这样我就可以知道管理员选择了多少用户，还有$scope.mainCheckBox，它将为每个主要复选框（如Gmail中的那个，用于选择全部/无）保存正确的CSS类三种情况：所有用户被选中、没有用户被选中和部分被选中。这个简单的逻辑如下：

$scope.updateMainCheckBox = function(){

    if(this.checked==this.users.length) this.mainCheckBox = "qm-icon-checked";
    else if(!this.checked) this.mainCheckBox = "";
    else this.mainCheckBox = "qm-icon-minus";

};

在其他复选框的 ng-click 事件回调结束时运行此代码，此代码能够正确选择类，但不会将类分配给 mainCheckBox。当我将每个 this.mainCheckBox 更改为 $scope.mainCheckBox 时，一切顺利，页面将按预期运行。

所以，我知道在 vanilla Js 中 this 是对 window 对象的引用，但由于 AngularJS 有自己的事件处理循环，我相信现在情况并非如此。我希望它是对$scope 的引用，因为找到了checked 和users，但显然不是。那么，这里发生了什么？而且，是否有更“角度”的方式来实现这一点？

Answer 1

您基本上是对的——就您的函数而言，this 确实引用了一个范围。但是，它没有引用$scope；相反，它引用了$scope 的其中一个孩子。

试试这个：添加一些console.log 语句以注销$scope 变量的ID，然后在您的回调中注销this 范围的ID：

$scope.updateMainCheckBox = function(){
  console.log('$scope:', $scope.$id);
  console.log('this:', this.$id);
  // ...
};

您会发现 ID 不同。这是因为ngRepeat 指令创建了一个子范围，这是一个从其父级原型继承的范围。这意味着当您直接分配给该范围上的值时，它不会到达 parent 范围，即$scope。

我强烈推荐阅读 Mark Rajcok 的优秀（和冗长）"The Nuances of Scope Prototypal Inheritance"；它解释了为什么您会在子范围内看到这种看似奇怪的行为。 （您也可以找到a copy on the AngularJS wiki。）