1

我对超级英雄框架 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 Jsthis中是对对象的引用，window但由于 AngularJS 有自己的事件处理循环，我相信现在情况并非如此。我希望它是$scope, since checkedand的参考users，但显然不是。那么，这里发生了什么？而且，是否有更“角度”的方式来实现这一点？

4

1 回答 1

2

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

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

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

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

我强烈推荐阅读Mark Rajcok的优秀（且冗长的） “作用域原型继承的细微差别” ；它解释了为什么您会在子范围内看到这种看似奇怪的行为。（你也可以在 AngularJS wiki 上找到一份副本。）

于 2013-05-12T02:30:25.007 回答