web-dev-qa-db-fra.com

comment passer la variable angulaire js dans la fonction onclick en tant que paramètre

J'ai essayé de passer la variable AngularJS comme valeur d'argument à l'intérieur de onclick () pour appeler la fonction javascript. Quelqu'un peut-il me guider sur la façon de le faire?

Mon code: 

 <div onclick="deleteArrival({{filterList.id}})" class="table-icon deleteIcon">{{filterList.id}}</div>
javascriptangularjsangularjs-ng-repeat
11
uday s

Vous devriez utiliser ng-click, il n'y a aucune raison d'utiliser onclick car angular vous offre cette fonctionnalité

<div ng-click="deleteArrival(filterList.id)" 
     class="table-icon deleteIcon">{{filterList.id}}</div>

Vous devez ensuite déplacer votre fonction dans votre contrôleur AngularJS et la lier à la portée.

$scope.deleteArrival = function(filterListId) { ... };

Si vous avez ABSOLUMENT besoin d'utiliser onclick pour appeler une fonction externe, vous pouvez remplacer cette fonction par un élément similaire à celui-ci, tout en utilisant l'attribut ng-click ci-dessus:

$scope.deleteArrival = function(filterListId) { window.deleteArrival(filterListId); };

Cependant, je ne vois aucune raison de ne pas le déplacer dans votre champ

22
SixteenStudio

Vous pouvez facilement résoudre votre problème en utilisant ng-click mais vous devriez avoir la méthode deleteArrival dans votre portée.

Balisage 

<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon">
  {{filterList.id}}
</div>
2
gaurav bhavsar

Si vous voulez toujours utiliser onclick, c'est un travail pour moi, j'espère que cela fonctionnera aussi pour vous.

<div id="{{filterList.id}}" onclick="deleteArrival(this.id)" class="table-icon deleteIcon">{{filterList.id}}</div>
2
Pichet Thantipiputpinyo

Je ne vais pas deviner vos raisons de ne pas utiliser ng-click, comme d'autres contributeurs l'ont déjà souligné. Cependant, si vous le désirez vraiment, voici ma suggestion en utilisant "this" et les attributs de données.

<div data-filterListId="{{filterList.id}}" onclick="deleteArrival(this)" class="table-icon deleteIcon">{{filterList.id}}</div>
function deleteArrival(arrivalElem) {
    alert('myId=' + arrivalElem.getAttribute("data-filterListId"));
}
1
Jailhouse Joe

Vous n'êtes pas autorisé à créer une liaison pour des attributs de gestionnaire d'événements tels que onclick, onload, onsubmit, etc. dans angularjs, car Il n'y a pas de valeur pratique à lier une liaison à ces attributs. XSS. Pour ces raisons, la liaison aux attributs du gestionnaire d'événements (tous les attributs commençant par les attributs on et formaction) n'est pas prise en charge dans angularjs.

Pour votre cas,

Dans ng-repeat, utilisez ng-click pour envoyer des valeurs à votre fonction et déclarez cette fonction dans le contrôleur.

Voir ici pour la documentation de ng-click

J'espère que cela t'aides !

1
Alhuck A

La chose ci-dessus est facilement possible en utilisant la directive ng-click et en ayant cette fonction à l'intérieur de la portée du contrôleur, il vous suffit d'affecter votre référence de fonction de script Java à la variable de portée du contrôleur. Pas besoin de réécrire la fonction dans votre portée à nouveau. Passez la référence de la fonction fera l'affaire.

Balisage 

<div ng-click="deleteArrival(filterList.id)" class="table-icon deleteIcon">
   {{filterList.id}}
</div>

Manette 

//assign javascript method reference in controller
$scope.deleteArrival = deleteArrival;
1
Pankaj Parkar

   $scope.getpop = function(id){
       alert(id);
    }
<span ng-click='getpop({{x.Code}})' class="btn-default btn">{{ x.title }}</span> 

<b>This works perfect for me !</b>

0
Abhishek kumar Sharma

essayez ceci sans les accolades deleteArrival (filterList.id)

0
vbouk

J'ai eu un cas où je ne pouvais pas utiliser ng-click en raison de la liaison de fenêtre. N'a pas eu de réponse directe mais le ci-dessous a fonctionné pour moi. Je sais que ce n’est pas une bonne solution, mais que c’est réalisable dans mon cas.

angular.element (this) .scope (). ctrlName.variable

Vous pouvez essayer d'utiliser votre propre structure de classe. Donc, le clic sera comme ci-dessous:

onclick = "test (angular.element (this) .scope (). ctrlName.ObjName.variable)"

0
ddsh79