angular.js - angularjs中如何實現(xiàn)單擊一個span標簽之后,拿到span標簽中的內(nèi)容?
問題描述
這里有很多愛好的描述,每個描述都是放在一個span標簽里面,我給每個span標簽都添加了ng-click=’getHobby()’,如何在$scope.getHobby=function(){}中拿到單擊時對應的span標簽內(nèi)的描述?
我的方法:我嘗試了在綁定getHobby()函數(shù)的時候,就在函數(shù)里面添加標簽內(nèi)的描述為參數(shù), 比如這樣getHobby('書蟲'),這樣也是可以的,但是不夠優(yōu)雅,并且在html又增加了很多代碼,想聽聽各位的解決方案
問題解答
回答1:app.controller(’TagCtrl’,function($scope){ $scope.tags=[{name:’書蟲’,code:’xx’},{name:’互聯(lián)網(wǎng)’,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控制的數(shù)據(jù),angular里面要時刻記住現(xiàn)有數(shù)據(jù),后面根據(jù)數(shù)據(jù)渲染界面,界面的操作通過event返回到controller處理。
如果你是通過其他方法在頁面生成tag列表,例如
<span ng-click='getHobby(’書蟲’)'>書蟲</span><span ng.....>互聯(lián)網(wǎng)</span>
這絕壁不是angular的正確使用姿勢。
剛開始用angular的為了防止原有思維定勢影響angular使用,請牢記一條可能太過絕對的守則:
1 絕對不能在controller做任何跟dom有關(guān)的操作2 任何跟dom相關(guān)的操作都應該放到directive里面
回答2:樓主在用jquery的思想做angular,不知道angular有雙向數(shù)據(jù)綁定嗎?給樓主個建議:angular的好處就是可以讓你不用再操作dom,當你在用angular卻在操作DOM時,想一想是不是有其他的方式。
回答3:不明白題主的做法,jQuery的實現(xiàn)方式很簡單
// 綁定 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
回答4:ng循環(huán)時給ngclick傳個當前元素不就行了。
回答5:寫個指令就行。。在指令的link函數(shù)中綁定點擊事件好了。。
