angular.js - angularjs中如何实现单击一个span标签之后,拿到span标签中的内容?
过去多啦不再A梦
过去多啦不再A梦 2017-05-15 16:55:27
0
5
716

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

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

过去多啦不再A梦
过去多啦不再A梦

Antworte allen(5)
大家讲道理
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函数中绑定点击事件好了。。

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage