To get the tagname of clicked element via ng-click using angularjs

Question

I am facing a problem with ng-click event. Below is my code. When I click on the element, it retrieves the span tag and if I call currentTarget, it gives the li element. I want to get the <a> element on ng-click.And after getting element i have to check whether it has a class named 'havesub', How can I achieve it?

<li>
  <a class="havesub" ui-sref="" ng-click="openmenu($event)">
    <img src="images/icon-03.png" alt="menu" />
    <span>Menu item1</span>
  </a>
</li>

Below is my function in controller

app.controller("con", function($scope) {
  $scope.openmenu = function($event) {
    var targets = $event.currentTarget;
  };
});

It gives me `` always when i click! See [this](http://plnkr.co/edit/bHyAD8gjqs0MPgViPwcc?p=preview) — Dhaval Marthak, Jul 07 '17 at 04:56
https://stackoverflow.com/questions/23107613/get-original-element-from-ng-click — Vivz, Jul 07 '17 at 05:05
@Vivz i have tried with this link also but it doesnt gives me the required thing — Rinoy Bala, Jul 07 '17 at 05:06
i have solved it myself and thanks for your help,[Got help from this link] https://stackoverflow.com/questions/28057453/how-to-test-if-event-target-hasclass-using-angular-and-jqlite — Rinoy Bala, Jul 07 '17 at 05:23

score 0 · Accepted Answer · answered Jul 07 '17 at 06:00

var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.click=function(event){
 alert(angular.element(event.currentTarget).hasClass("havesub"));
}
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ngClickApp">
<head>
 <title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<form name="userForm">

 <li>
  <a href  class="havesub"  ng-click="click($event)">
    <img src="1.png" alt="menu" />
    <span>Menu item1</span>
  </a>
</li>

</form>
</body>
</html>

event.currentTarget works fine for me

<html ng-app="ngClickApp">
<head>
    <title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<form name="userForm">

 <li>
  <a href  class="havesub"  ng-click="click($event)">
    <img src="1.png" alt="menu" />
    <span>Menu item1</span>
  </a>
</li>

</form>
<script type="text/javascript">
var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.click=function(event){
    alert(angular.element(event.currentTarget).hasClass("havesub"));
}
}]);
</script>
</body>
</html>

To get the tagname of clicked element via ng-click using angularjs

1 Answers1