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列表，例如

<span ng-click="getHobby('书虫')">书虫</span>
<span ng.....>互联网</span>

这绝壁不是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函数中绑定点击事件好了。。