4

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:

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

In my Angular script, I set this up:

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

I also tried in html:

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

and in my Angular script:

  $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. >.<

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>

And in my Angular Script I used:

  $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

4 Answers 4

9

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;

<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,
  });
};
5
  • Wow this seems to be a more simple approach. Let me give it a try.
    – Aero Wang
    Mar 29, 2015 at 16:49
  • Using $event is perfectly acceptable with AngularJS, even if what you are clicking has an existing model.
    – Jacob
    Mar 29, 2015 at 16:49
  • 2
    as i said "in your case" and never said $event is not acceptable. But when it can be done the change with model manipulation it should be done that way. The other approach is more jQuery way of doing it.
    – Onur Topal
    Mar 29, 2015 at 16:53
  • I think your are both right, I would like to know how to use $event to get this done too. Too bad only one answer can be accepted.
    – Aero Wang
    Mar 29, 2015 at 16:57
  • Thanks. I was making it too hard. This is very easy. Jul 8, 2016 at 14:56
9

If you pass in ng-click="showCardDes($event)" you can access the element within the $event object.

So in your javascript it would look like this:

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

3
  • I see, I might forget to use currentTarget, let me also give this a try.
    – Aero Wang
    Mar 29, 2015 at 16:53
  • This gives me a reference error ReferenceError: $event is not defined, I think the problem is at me, but I don't put my finger on it.
    – Aero Wang
    Mar 29, 2015 at 16:55
  • I see, you used $event in your angular script. And I used event this is why. Your method also worked.
    – Aero Wang
    Mar 29, 2015 at 16:58
1

The ngClick directive passes a named $event property to your handler, which you can use to access "this" (aka the event target).

<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,
  });
};
1
  • Hey there, I actually had tried this approach too. I should mentioned it. In console log it tells me Uncaught TypeError: Cannot read property 'hasAttribute' of undefined.
    – Aero Wang
    Mar 29, 2015 at 16:48
-1

I would also like to mention that you can instantly pass the card, like this

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

And if you desire the element itself, then you can add a #variableName, and pass that. Here is a example of them both together.

<tr *ngFor="let card of cards" (click)="randomFunction({card}, cardRef)" #cardRef>
      <td><span class="ms-1">9 of Diamonds</span></td>
</tr>
1
  • The question is about AngularJS, not Angular 2+ Sep 5, 2023 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.