jQuery Angularjs ng-click：如何获取`this`数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20814420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs ng-click: how to get `this` data?
提问by laukok
Let say I have this item in the list with angular ng-clickevent.
假设我在带有角度ng-click事件的列表中有这个项目。
<a data-id='102' ng-click='delete()'>Delete</a>
How can I get the data/ info if thisthen?
如果this那样，我如何获取数据/信息？
$scope.delete = function() {
var id = $(this).attr('data-id');
console.log(id); // I want to get 102 as the result
if (confirm('Are you sure to delete?')) {
$('#contactsGrid tr[data-id="' + id + '"]').hide('slow');
}
};
回答by Arun P Johny
The right solution will be is to pass the id as an parameter to the delete function like
正确的解决方案是将 id 作为参数传递给删除函数，如
<a data-id='102' ng-click='delete(102)'>Delete</a>
then
然后
$scope.delete = function(id) {
console.log(id); // I want to get 102 as the result
if (confirm('Are you sure to delete?')) {
$('#contactsGrid tr[data-id="' + id + '"]').hide('slow');
}
};
This should not be done, but just to demonstrate
这不应该做，而只是为了演示
Inside ng-clickyou can get the event using $event, so
在内部，ng-click您可以使用 获取事件$event，因此
<a data-id='102' ng-click='delete($event)'>Delete</a>
then
然后
$scope.delete = function (e) {
var id = $(e.target).data('id');
console.log(id); // I want to get 102 as the result
};
Demo: Fiddle
演示：小提琴
回答by aashish
To access clicked link tag attributes
访问单击的链接标记属性
In jQuery,
在jQuery 中，
<a class='test' data-id='102' ng-click='delete(102)'>Delete</a>
on click of above link is handled as
点击上面的链接被处理为
$('.test').click(function(){
console.log($(this).attr('data-id'));
});
Demo code for jQuery : fiddle
jQuery 的演示代码：fiddle
In Angularjs,
在Angularjs 中，
<a class='test' data-id='102' ng-click='delete($event)'>Delete</a>
on click of above link is handled as
点击上面的链接被处理为
$scope.delete = function (e) {
console.log($(e.currentTarget).attr("data-id"));
}
Demo code for Angularjs : fiddle
Angularjs 的演示代码：fiddle
回答by phil
You can also access the event data for Jquery in angular using:
您还可以使用以下 angular 访问 Jquery 的事件数据：
$scope.myClickedEvent = function(clickEvent) {
$scope.clickEvent = simpleKeys(clickEvent);
angular.element(clickEvent.currentTarget);
console.log(angular.element(clickEvent.currentTarget).text());
/*
* return a copy of an object with only non-object keys
* we need this to avoid circular references
*/
function simpleKeys (original) {
return Object.keys(original).reduce(function (obj, key) {
obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key];
return obj;
}, {});
}
};
Your clicked element should contain an ng-click like this
你点击的元素应该包含一个像这样的 ng-click
ng-click="myClickedEvent($event)"
回答by Ki Jéy
If for some other reason, you still need to access the element here's how I did it :
如果由于其他原因，您仍然需要访问该元素，我是这样做的：
<span ng-click="selectText($event)"></span>
and in the controller
并在控制器中
$scope.selectText = function(event) {
var element = event.currentTarget; // returns the span DOM Element
// Now you can access its dataset just like in plain old JS
// In my case it was for selecting the content of a tag on click anywhere on the tag
};
