1

Im trying to use event deligation to determine which template will be used in my directive. The problem is I cannot figure out how to get the button element where the click event is bound. The event target can vary depending on where the mouse is when the user clicks. It can be either the span or the button tag. What is the best way to get the button element whether the target is the span or button without all kinds of crazy conditional code?

Also I cannot customize the directive because I am using Angular Material and I can't use jQuery.

HTML:

<button ng-click="main.authDialog($event)">
  <span class="ng-scope">Sign Up</span>
  <div class="md-ripple-container"></div>
</button>
4
  • 1
    A runnable minimal reproducible example in the question using Stack Snippets (the <> toolbar button) makes it easier for you to get useful answers. Jun 19, 2016 at 13:46
  • This answer might help. You can access the element by $event.target in authDialog() definition.
    – Shaunak D
    Jun 19, 2016 at 13:47
  • why not attached eventlisteners using a short for loop to all elements you are interested and whenever an element is click the handler will return the target?.Is that what you are interested in?
    – repzero
    Jun 19, 2016 at 13:49
  • @ShaunakD: $event.target will be a descendant element (such as the span or div in the button), not the button. Jun 19, 2016 at 13:53

1 Answer 1

3

event.currentTarget tells you the element on which the event was hooked, rather than the one on which it was triggered (event.target).

Example:

var myApp = angular.module('exModule', []);
myApp.controller('exController', function($scope) {
  $scope.main = {
    authDialog(e) {
      console.log("target", e.target);
      console.log("currentTarget", e.currentTarget);
    }
  };
});
<div ng-app="exModule" ng-controller="exController">
  <button ng-click="main.authDialog($event)">
    <span class="ng-scope">Sign Up</span>
    <div class="md-ripple-container"></div>
  </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


Side note: That HTML is invalid, button elements cannot contain div elements.

5
  • Thank you. Regarding the invalid HTML, that is the way Angular Material does it after transclusion. Guess there is not much to be done there.
    – Aaron
    Jun 19, 2016 at 14:11
  • @Aaron: Sounds like a messed up template. I'm quite certain Angular isn't forcing invalid HTML on people. Jun 19, 2016 at 14:17
  • So the button directive is as follows: <md-button class="md-primary md-raised signup" ng-click="main.authDialog($event)">Sign Up </md-button> Adding the class md-raised seems to make the directive add the div. I cannot see any way from the documentation to change that: material.angularjs.org/latest/api/directive/mdButton
    – Aaron
    Jun 19, 2016 at 14:23
  • Actually even removing the class the ripple container is still there.
    – Aaron
    Jun 19, 2016 at 14:24
  • So that's Angular Material rather than Angular. I see the divs in their demos, too. That's pretty shocking; it's Just Plain Wrong™. :-) divs can only be used where flow content is expected, but the content model of button is phrasing content. Jun 19, 2016 at 14:31

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.