如何使用ng-click传递“this”？

Question

我觉得我以前做过这个，但是我忘了该怎么做。以下是我要完成的内容：

在HTML中，我有这样的设置：

<md-card ng-repeat="card in cards" data-link="{{card.link}}" ng-click="showCardDes(this)">

在我的Angular脚本中，我进行了如下设置：

  $scope.showCardDes = function(e) {
    var tempUrl = $(e).attr('data-link');
    $mdDialog.show({
      controller: DialogController,
      templateUrl: tempUrl,
    });
  };

我也尝试在html中使用： 以及在我的Angular脚本中：

  $scope.showCardDes = function(url) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: url,
    });
  };

我记得以前做这件事情时，它涉及设置一个ng-model，但我现在无论是在线上还是在我的硬盘中都找不到文档。>.< 我忘了提到我还尝试过这个：<md-card ng-repeat="card in cards" class="noselect hietim {{card.size}}" data-link="{{card.link}}" ng-click="showCardDes($event)" md-ink-ripple> 在我的Angular脚本中，我使用了：

  $scope.showCardDes = function(event) {
    var tempUrl = $(event.target).attr('data-link');
    $mdDialog.show({
      controller: DialogController,
      templateUrl: tempUrl,
    });
  };

这将返回： 未捕获的TypeError：无法读取未定义的'hasAttribute'属性

- Aero Wang

Answer 1

正如其他人所说，你可以使用$event来实现这一点，但在你的情况下，这不是Angular的做法。你应该将你的模型作为参数传递，并读取它的属性。

<md-card ng-repeat="card in cards" ng-click="showCardDes(card)">

在你的控制器中；

$scope.showCardDes = function(card) {
  var tempUrl = card.link;
  $mdDialog.show({
    controller: DialogController,
    templateUrl: tempUrl,
  });
};

- Onur Topal

---

哇，这似乎是一种更简单的方法。让我试试看。 - Aero Wang

在AngularJS中使用$event是完全可以接受的，即使你点击的元素已经有了一个现有的模型。 - Jacob

就像我之前说的“在你的情况下”，我从未说过$event是不可接受的。但是，如果可以使用模型操作进行更改，则应该以这种方式完成。另一种方法更像jQuery的方式。 - Onur Topal

我认为你们两个都是对的，我也想知道如何使用$event来完成这个任务。很遗憾只能接受一个答案。 - Aero Wang

谢谢。我把它想得太难了。这很容易。 - Steve Gaines

Answer 2

如果你传入ng-click="showCardDes($event)"，你可以通过$event对象访问元素。

所以在你的javascript中应该这样写：

 $scope.showCardDes = function($event) {
    var btn = $event.currentTarget;
    var tempUrl = $(btn).attr('data-link');
    $mdDialog.show({
      controller: DialogController,
      templateUrl: tempUrl,
    });
  };

- Jacob

---

我明白了，我可能忘记使用 currentTarget，让我也试一下。 - Aero Wang

这给了我一个引用错误 ReferenceError: $event未定义，我认为问题出在我身上，但我无法确定。 - Aero Wang

我看到你在你的Angular脚本中使用了 $event。而我使用了 event 这就是为什么。你的方法也可以。 - Aero Wang

Answer 3

ngClick 指令 将一个命名为 $event 的属性传递 给您的处理程序，您可以使用它来访问“this”（也就是事件目标）。

<md-card ng-click="showCardDes($event)" ...>

那么你的控制器可能长这样：

$scope.showCardDes = function(event) {
  var tempUrl = $(event.target).attr('data-link');
  $mdDialog.show({
    controller: DialogController,
    templateUrl: tempUrl,
  });
};

- bvaughn

---

嗨，我之前也尝试过这种方法。我应该提到它的。在控制台日志中，它告诉我“未捕获的类型错误：无法读取未定义的属性'hasAttribute'”。 - Aero Wang

Answer 4

我还想提一下，你可以立即传递卡片，就像这样。

(click)="someFunction({card})"

如果您需要元素本身，则可以添加#variableName并传递它。以下是两者结合在一起的示例。

<tr *ngFor="let card of cards" (click)="randomFunction({card}, cardRef)" #cardRef>
      <td><span class="ms-1">9 of Diamonds</span></td>
</tr>

- MeanChicken

---

问题是关于AngularJS，而不是Angular 2+。 - undefined