angulaire.js - Pourquoi la liaison d'événements aux directives angulaires ne prend pas effet

Question

Parce que je viens d'entrer en contact avec Angular, certains concepts sont encore très vagues. J'ai essayé de trouver la réponse à cette question via Google, mais je n'ai pas trouvé de réponse appropriée, j'aimerais donc vous la poser ici. est un code approximatif :

<p ng-repeat="item in list" class="need-another-js"></p>
<script>
    $('.need-another-js').click(function(){
        // do something
    })
</script>

Si ng-repeat est supprimé, l'effet du code JS peut être obtenu, mais après l'ajout de ng-repeat, l'effet n'existe pas. Est-ce à cause du problème de portée angulaire ?

Answer 1

Cela n'a rien à voir avec la portée, c'est purement une forme d'erreur typique de jquery => angular.

Les instructions

AngularJS, en tant qu'API "déclarative", sont très différentes de l'API "impérative" de jquery Il est facile de faire des erreurs lorsque vous les mélangez.

1. Erreur de bon sens, id est utilisé pour indiquer le caractère unique d'un élément, mais vous l'avez utilisé sur ng-repeat, ce qui signifie qu'il peut y avoir plusieurs id éléments, qui sont tous need-another-js. Cela n'a rien à voir avec jquery ou angular, c'est purement html manque de connaissances

2. ng-repeat, comme l'instruction fournie par angular, doit passer par les processus angular et compile de linking. Par conséquent, lorsque votre $('#need-another-js').click enregistre un événement. pour l'élément #need-another-js , cet élément n'a pas réellement été généré dans angular par DOM, et c'est la clé pour qu'il ne prenne pas effet.

Juste pour votre exemple, vous pouvez apporter les modifications suivantes pour le rendre efficace :

<p ng-repeat="item in list" class="need-another-js"></p>

Pas besoinidUtiliserclass

<script>
    $(document).on('click', '.need-another-js', function(){
        // do something
    });
</script>

Bien que je ne recommande pas cette façon d'écrire, puisque vous avez choisi de mélanger "impératif" et 声明式API, vous devez avoir vos raisons.

Supplément :

Concernant le fonctionnement de angular, je pense qu'il est utile pour les étudiants qui débutent de lire cette introduction sur le site officiel :

Adresse du document : concepts

Answer 2

<p ng-repeat="item in list" id="need-another-js"></p>
<!--ng-repeat生成了一系列id为need-another-js的DOM元素，而DOM元素的ID是不能重复的-->
<script>
    $('#need-another-js').click(function(){//可能在ng-repeat还未执行完成的时候便执行了
    //需在ng-repeat执行完成时，设置onclick事件才有效
        // do something
    })
</script>

Answer 3

angular a un événement de liaison qu'il prend en charge ng-click

Vous pouvez essayer de l'écrire comme ça

<p ng-repeat="item in list" ng-click="click()"></p>
<script>
    //省略其他控制器的写法
    $scope.click = function() {
       //do something
   }
</script>

Answer 4

Quand j'apprenais Angular, je suis passé directement de jq à angulaire. Angular peut faire tout ce que jq peut faire

.

Answer 5

ng-repeat consiste à ajouter dynamiquement des éléments dom. Si vous utilisez la méthode click pour lier des événements à des éléments ajoutés dynamiquement, cela ne sera pas déclenché. Si vous aimez utiliser jquery, utilisez la méthode proposée par leftstick, mais il est recommandé d'utiliser la méthode angulaire proposée par mumofa