javascript 如何通过 ng-click 传递“this”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29331811/
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
How to pass "this" with ng-click?
提问by Aero Wang
I think I have done this before but I forgot how to do it. Here is what I want to accomplish:
我想我以前做过这个，但我忘了怎么做。这是我想要完成的：
In the html, I have this setup:
在 html 中，我有这样的设置：
<md-card ng-repeat="card in cards" data-link="{{card.link}}" ng-click="showCardDes(this)">
<md-card ng-repeat="card in cards" data-link="{{card.link}}" ng-click="showCardDes(this)">
In my Angular script, I set this up:
在我的 Angular 脚本中，我进行了设置：
$scope.showCardDes = function(e) {
var tempUrl = $(e).attr('data-link');
$mdDialog.show({
controller: DialogController,
templateUrl: tempUrl,
});
};
I also tried in html:
我也在 html 中尝试过：
<md-card ng-repeat="card in cards" ng-click="showCardDes({{card.link}})">
<md-card ng-repeat="card in cards" ng-click="showCardDes({{card.link}})">
and in my Angular script:
在我的 Angular 脚本中：
$scope.showCardDes = function(url) {
$mdDialog.show({
controller: DialogController,
templateUrl: url,
});
};
I remember when I did it before it involved something with setting up a ng-model, but I seriously cannot find the documentation either online or in my hard drive. >.<
我记得我之前做过它涉及设置 ng-model 的事情，但我真的找不到在线或硬盘驱动器中的文档。 >.<
I forgot to mention I also tried this:
我忘了提到我也试过这个：
<md-card ng-repeat="card in cards" class="noselect hietim {{card.size}}" data-link="{{card.link}}" ng-click="showCardDes($event)" md-ink-ripple>
<md-card ng-repeat="card in cards" class="noselect hietim {{card.size}}" data-link="{{card.link}}" ng-click="showCardDes($event)" md-ink-ripple>
And in my Angular Script I used:
在我的 Angular 脚本中，我使用了：
$scope.showCardDes = function(event) {
var tempUrl = $(event.target).attr('data-link');
$mdDialog.show({
controller: DialogController,
templateUrl: tempUrl,
});
};
This will return:
这将返回：
Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
未捕获的类型错误：无法读取未定义的属性“hasAttribute”
回答by Jacob
If you pass in ng-click="showCardDes($event)"you can access the element within the $eventobject.
如果传入，则ng-click="showCardDes($event)"可以访问$event对象内的元素。
So in your javascript it would look like this:
所以在你的javascript中它看起来像这样：
$scope.showCardDes = function($event) {
var btn = $event.currentTarget;
var tempUrl = $(btn).attr('data-link');
$mdDialog.show({
controller: DialogController,
templateUrl: tempUrl,
});
};回答by Onur Topal
as others said you can use $event for this but in your case it is not the angular way of doing it. You should pass your model as parameter and read its property;
正如其他人所说，您可以为此使用 $event ，但在您的情况下，这不是这样做的角度方式。您应该将模型作为参数传递并读取其属性；
<md-card ng-repeat="card in cards" ng-click="showCardDes(card)">
and in your controller;
并在您的控制器中；
$scope.showCardDes = function(card) {
var tempUrl = card.link;
$mdDialog.show({
controller: DialogController,
templateUrl: tempUrl,
});
};
回答by bvaughn
The ngClickdirective passes a named $eventpropertyto your handler, which you can use to access "this" (aka the event target).
该ngClick指令将一个命名$event属性传递给您的处理程序，您可以使用它来访问“this”（也就是事件目标）。
<md-card ng-click="showCardDes($event)" ...>
Then your controller may look like this:
那么您的控制器可能如下所示：
$scope.showCardDes = function(event) {
var tempUrl = $(event.target).attr('data-link');
$mdDialog.show({
controller: DialogController,
templateUrl: tempUrl,
});
};
