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>

各種標籤應該是由controller透過scope控制的數據，angular裡面要時時記住現有數據，後面根據數據渲染介面，介面的操作透過event返回到controller處理。

如果你是透過其他方法在頁面產生tag列表，例如

書蟲
網路

這絕壁不是angular的正確使用姿勢。

---

剛開始用angular的為了防止原有思維定勢影響angular使用，請牢記一條可能太過絕對的守則：

1 絕對不能在controller做任何跟dom有關的操作
2 任何跟dom相關的操作都應該放到directive裡面

Answer 2

樓主在用jquery的思想做angular，不知道angular有雙向資料綁定嗎？
給樓主建議：angular的好處就是可以讓你不用再操作dom，當你在用angular卻在操作DOM時，想一想是不是有其他的方式。

Answer 3

不懂題主的做法，jQuery的實作方式很簡單

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

17:07 修改
題主可以參考下：

<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:jQuery主頁下面有推薦書籍
參考Jquery .on()
AngularJS Events

Answer 4

ng循環時給ngclick傳個當前元素不就行了。

Answer 5

寫個指令就行。 。
在指令的link函數中綁定點擊事件好了。 。