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

问题描述

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

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

问题解答

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里面

楼主在用jquery的思想做angular，不知道angular有双向数据绑定吗？给楼主个建议：angular的好处就是可以让你不用再操作dom，当你在用angular却在操作DOM时，想一想是不是有其他的方式。

不明白题主的做法，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

ng循环时给ngclick传个当前元素不就行了。

写个指令就行。。在指令的link函数中绑定点击事件好了。。