web-dev-qa-db-fra.com

Comment passer un paramètre à une fonction ng-click?

J'ai une fonction dans mon contrôleur qui ressemble à ceci:

AngularJS:

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

Je veux le garder général en passant le nom de la classe que je veux basculer:

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

Mais myClass n'est pas transmis à la fonction angular. Comment puis-je faire fonctionner cela? Le code ci-dessus fonctionne si je l'écris comme ceci:

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

Mais ce n'est évidemment pas général. Je ne veux pas coder en dur dans la classe nommée myClass.

angularjsangularjs-ng-click
13
Stephanie Caldwell

Dans la fonction

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

$scope.class n'a rien à voir avec le paramètre class. C'est littéralement une propriété sur $scope appelé class. Si vous souhaitez accéder à la propriété sur $scope c'est-à-dire identifié par la variable class, vous devrez utiliser l'accesseur de type tableau:

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

Notez que ce n'est pas Angular spécifique; c'est exactement comme cela que JavaScript fonctionne. Prenez l'exemple suivant:

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

De plus, le code

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

fait l'hypothèse qu'il existe une variable sur votre portée, par exemple $scope.myClass qui correspond à une chaîne portant le nom de la propriété à laquelle vous souhaitez accéder. Si vous littéralement voulez passer la chaîne myClass, vous aurez besoin

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

L'exemple ne rend pas très clair ce que vous recherchez (car il y a une classe nommée myClass en haut div).

26
Michelle Tilley