angular.js - angularjs中如何实现单击一个span标签之后，拿到span标签中的内容?

Question

这里有很多爱好的描述，每个描述都是放在一个span标签里面，我给每个span标签都添加了ng-click='getHobby()',如何在$scope.getHobby=function(){}中拿到单击时对应的span标签内的描述？

我的方法：我尝试了在绑定getHobby()函数的时候，就在函数里面添加标签内的描述为参数， 比如这样getHobby("书虫")，这样也是可以的，但是不够优雅，并且在html又增加了很多代码，想听听各位的解决方案

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. .