如何将参数传递给ng-click功能?

时间:2013-07-09 02:20:35

标签: angularjs angularjs-ng-click

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

AngularJS:

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

我希望通过传递我要切换的类的名称来保持通用性:

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

但是myClass没有被传递给angular函数。我怎样才能让它发挥作用?如果我这样编写,上面的代码就可以了:

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

但是,这显然不是一般的。我不想在名为myClass的类中进行硬编码。

1 个答案:

答案 0 :(得分:26)

在功能

$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,其值为一个字符串,其中包含您要访问的属性的名称。如果字面上想要传入字符串myClass,则需要

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

这个例子并不能说明你在寻找哪个(因为在myClass上有一个名为div的类。)