6

After a click pass the event to ctrl. I want to write a conditional that will return true if the element.target has the class modal-click-shield

Question:

How can I use .hasClass() with event.target using angulars' jqlite?

Problem:

Currently I'm getting a type error saying that:

$scope.exitModal = function(event){
        // Return to current page when exiting the modal, via UI.
        // After state return, should set focus on the matching link.
        var target = event.target;
        console.log(target.hasClass('modal-click-shield'));
});

Error:

TypeError: undefined is not a function

Html:

  <div class="modal-click-shield" ng-click="exitModal($event)">
     <div ui-view="pdw"  class="product-container"></div>
  </div>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Armeen Moon
  • 18,061
  • 35
  • 120
  • 233

3 Answers3

18

Your element from event.target is a regular HTMLElement, not the JQlite version. You need to do this to convert it:

angular.element(event.target);
risto
  • 1,274
  • 9
  • 11
13

If you want to keep using your JS DOM element plain without use jQuery or angular:

event.target.classList.contains('modal-click-shield')
iarroyo
  • 2,354
  • 24
  • 23
4

because event.target is a DOM node, not a "jQuery" object. Wrap it 

var target = $(event.target);

or 

angular.element(event.target);
epascarello
  • 204,599
  • 20
  • 195
  • 236