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>

Pelbagai teg hendaklah data dikawal oleh pengawal melalui skop mesti sentiasa mengingati data sedia ada, dan kemudian memaparkan antara muka berdasarkan data Operasi antara muka dikembalikan kepada pengawal melalui peristiwa untuk diproses.

Jika anda menjana senarai teg pada halaman melalui kaedah lain, seperti

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

Ini bukan cara yang betul untuk menggunakan sudut.

---

Jika anda baru mula menggunakan Angular, untuk mengelakkan pemikiran asal anda daripada menjejaskan penggunaan Angular anda, sila ingat peraturan yang mungkin terlalu mutlak:

1 Anda tidak boleh melakukan sebarang operasi berkaitan DOM dalam pengawal
2 Sebarang operasi berkaitan DOM harus diletakkan dalam arahan

Answer 2

Poster asal menggunakan idea jquery untuk membuat sudut Saya tertanya-tanya jika sudut mempunyai pengikatan data dua hala?
Cadangan kepada poster: Kelebihan sudut ialah ia membenarkan anda tidak lagi mengendalikan DOM Apabila anda menggunakan sudut tetapi mengendalikan DOM, fikirkan sama ada terdapat cara lain.

Answer 3

Saya tidak faham apa yang dilakukan oleh penyoal, pelaksanaan jQuery sangat mudah

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

17:07 Pengubahsuaian
Sila rujuk perkara berikut:

<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: Terdapat buku yang disyorkan di bawah halaman utama jQuery
Rujuk Jquery .on()
AngularJS Events

Answer 4

Adakah cukup untuk menghantar elemen semasa kepada ngclick semasa gelung ng?

Answer 5

Tulis sahaja arahan. .
Ikat acara klik dalam fungsi pautan arahan. .