J'ai une liste d'éléments de $scope, et je lie l'événement jQuery avec eux, et j'utilise un champ de saisie pour filtrer la liste. Tout fonctionne comme prévu.

Lorsque je tape quelque chose dans le champ de saisie, les éléments filtrés seront toujours liés à l'événement jQuery; cependant, si je supprime le texte du champ de saisie, les éléments qui réapparaissent semblent être hors de portée.

Vous pouvez vérifier ce plunker. Lorsque je clique sur le bouton dans la liste, une alerte apparaîtra, mais si je tape b dans la zone de saisie, puis le supprime, en cliquant sur le bouton avec le texte a ne vous montrera pas le apparaitre.

Comment puis-je réparer cela?

Merci d'avance.

Mise à jour:

Merci pour les réponses, je suis désolé de vous induire en erreur en utilisant un exemple aussi simple: / la situation réelle est assez différente. Quoi qu'il en soit, l'utilisation de jQuery .on n'est pas une bonne idée ici, ce que je dois faire est de passer l'objet $event à une fonction dans la portée et de gérer l'élément DOM à l'intérieur de cette fonction.

0
lozy219 14 juil. 2015 à 11:46

3 réponses

Meilleure réponse

Le problème est avec le filtre angulaire, vous devez être clair avec son filtre de fonctionnalité, non pas masquer l'élément du DOM, mais également supprimer cet élément du DOM dès la première fois que des événements sont attachés à l'élément, mais lorsque vous recherchez dans le champ de saisie aucun événement ne reste sur le même élément.

Voici la solution

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body ng-app="test">
    <h1>Hello Plunker!</h1>
    <input type="text" ng-model="ftr">
    <ul ng-controller="TestController">
      <li ng-repeat="item in list | filter : {name : ftr}">
        <button class="item" ng-click='getEvent()'>{{ item.name }}</button>
      </li>
    </ul>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="app.js"></script>
  </body>

</html>

.

angular.module('test', [])
.controller('TestController', ['$scope', function($scope) {
  $scope.list = [
    { name: 'a' },
    { name: 'ab' },
    { name: 'abc' },
    { name: 'abcd' },
    { name: 'abcde' }
  ];
  $scope.getEvent = function(){
   $('.item').on('click', function () {alert('ha');});
  }
  setTimeout(function() {
    $('.item').on('click', function () {alert('ha');});
  }, 100);
}]);

Une solution de plus juste délicate.

 $('body').on('click','.item', function () {alert('ha');});

C'est une méthode pour attacher un élément sur un élément à venir.

1
ngLover 14 juil. 2015 à 09:08

Pour que les éléments de votre DOM soient toujours accessibles à Angular, vous devez utiliser ng-clic - AngularJS norme directive .

//in HTML
    <button class="item" ng-click="sayHa(item)">{{ item.name }}</button>


//in Javascript
     $scope.sayHa = function(item){
        $window.alert(item.name);
      }

Vérifiez Plunker modifié

1
shershen 14 juil. 2015 à 08:55

Utilisez ng-click au lieu de l'événement jquery: Voir Plunker

1
Dmitry Efimenko 14 juil. 2015 à 08:51