angularjs - 如何将参数传递给 ng-click 函数？

Question

我的控制器中有一个函数，如下所示：

AngularJS：

$scope.toggleClass = function(class){
    $scope.class = !$scope.class;
}

我想通过传递我想要切换的类的名称来保持它的通用性：

<div class="myClass">stuff</div>
<div ng-click="toggleClass(myClass)"></div>

但是myClass没有被传递给角度函数。我怎样才能让它工作？如果我这样写，上面的代码就可以工作：

$scope.toggleClass = function(){
    $scope.myClass = !$scope.myClass;
}

但是，这显然不是通用的。我不想在名为myClass.

score 26 · Accepted Answer

在函数中

$scope.toggleClass = function(class){
    $scope.class = !$scope.class;
}

$scope.class与参数没有任何关系class。它实际上是$scope被调用的属性class。如果要访问由变量标识$scope的属性，则需要使用数组样式的访问器：class

$scope.toggleClass = function(class){
    $scope[class] = !$scope[class];
}

请注意，这不是 Angular 特定的；这就是 JavaScript 的工作原理。举个例子：

> var obj = { a: 1, b: 2 }
> var a = 'b'
> obj.a
  1
> obj[a] // the same as saying: obj['b']
  2

另外，代码

<div ng-click="toggleClass(myClass)"></div>

假设您的范围内有一个变量，例如$scope.myClass，它计算为一个字符串，该字符串具有您要访问的属性的名称。如果你真的想传入 string myClass，你需要

<div ng-click="toggleClass('myClass')"></div>

这个例子并没有让你非常清楚你在寻找哪个（因为有一个名为myClasstop的类div）。

1 回答 1