angulaire.js - Comment obtenir le contenu d'une balise span après avoir cliqué sur une balise span dans angulairejs ?

Question

Il existe de nombreuses descriptions de loisirs ici. Chaque description est placée dans une balise span. J'ai ajouté ng-click='getHobby()' à chaque balise span. Comment utiliser $scope.getHobby=function( ){}. obtenir la description dans la balise span correspondant au clic ?

Ma méthode : Lorsque j'ai lié la fonction getHobby(), j'ai ajouté la description dans la balise en tant que paramètre dans la fonction, comme getHobby("Bookworm"). C'est également possible, mais ce n'est pas assez élégant. , et j'ai ajouté beaucoup de code au HTML, j'aimerais entendre vos solutions

Answer 1

app.controller('TagCtrl',function($scope){
   $scope.tags=[{name:'书虫',code:'xx'},{name:'互联网',code:'yy'}];
   $scope.onSelect=function(tag){
     $scope.selectedTag=tag;
     console.log(tag.name)//tag.code......
   }
});

<ul ng-controller='TagCtrl'>
    <li ng-repeat="tag in tags">
        <span ng-click="onSelect(tag)">{{tag.name}}</span>
    </li>
</ul>

Diverses balises doivent être des données contrôlées par le contrôleur via la portée. Angular doit toujours se souvenir des données existantes, puis restituer l'interface en fonction des données. Les opérations de l'interface sont renvoyées au contrôleur via des événements pour traitement.

Si vous générez la liste de balises sur la page via d'autres méthodes, telles que

<span ng-click="getHobby('Bookworm')">Bookworm</span>
<span ng.....>Internet</span>

Ce n'est pas la bonne façon d'utiliser angulaire.

---

Si vous commencez tout juste à utiliser Angular, afin d'éviter que votre état d'esprit initial n'affecte votre utilisation d'Angular, veuillez garder à l'esprit une règle qui peut être trop absolue :

1 Vous ne devez effectuer aucune opération liée au DOM dans le contrôleur
2 Toute opération liée au DOM doit être placée dans la directive

Answer 2

L'affiche originale utilise des idées jquery pour créer angulaire. Je me demande si angulaire a une liaison de données bidirectionnelle ?
Une suggestion à l'affiche : L'avantage d'angular est qu'il vous permet de ne plus faire fonctionner le DOM. Lorsque vous utilisez angulaire mais que vous exploitez le DOM, réfléchissez s'il existe d'autres moyens.

Answer 3

Je ne comprends pas ce que fait le questionneur, la mise en œuvre de jQuery est très simple

// 绑定 p 下面所有span标签的click事件
$("p span").on('click', function(){
  // 获得span的text
  var text = $(this).text();
});  

17:07 Modification
Veuillez vous référer à ce qui suit :

<p ng-controller="MyController" >
    <p ng-click="myData.doClick()">Click here</p>
</p>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.doClick = function() {
                    alert("clicked");
                }
            } );
</script>

PS : Il existe des livres recommandés sur la page d'accueil de jQuery
Référez-vous à Jquery .on()
Événements AngularJS

Answer 4

Ne suffirait-il pas de passer l'élément actuel à ngclick pendant la boucle ng ?

Answer 5

Écrivez simplement une commande. .
Liez l'événement click dans la fonction de lien de la commande. .