javascript - 'this' 真的是 AngularJS 上下文中对 "$scope"的引用吗？

Question

我是 super 英雄框架 AngularJS 的新手，所以请原谅我的菜鸟!因此，当我尝试开发一个简单的 SPA 允许管理员通过一个充满选择复选框的表格更改我网站中其他用户的权限时，我遇到了一个问题。我定义了 $scope.checked 这样我就可以知道管理员选择了多少用户以及 $scope.mainCheckBox 它将包含主要复选框的正确 CSS 类(比如一个来自 Gmail，用于选择全部/无)在三种情况中的每一种情况下:选择所有用户、未选择用户和部分选择。这个简单的逻辑如下:

$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，但显然不是。那么，这里发生了什么？而且，是否有更“Angular ”的方式来实现这一点？

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 指令创建了一个 child 范围，这是一个从其父级原型(prototype)继承的范围。这意味着当您直接分配给该范围内的值时，它不会到达 parent 范围，即 $scope。

我强烈推荐通读优秀(且冗长)"The Nuances of Scope Prototypal Inheritance"通过 Mark Rajcok ;它解释了为什么您会在子作用域上看到这种看似奇怪的行为。 (您还可以找到 a copy on the AngularJS wiki 。)