javascript - Angularjs 获取点击元素的 id 时出现问题

Question

我正在尝试获取 angularjs 中单击的元素的 id，它工作得很好。下面是我的代码

html

<a href="#faqinner/contactform" class="clearfix" ng-click="getCateId($event)" id="{{option.id}}">
      <span class="icon">
          <img ng-if="option.icon!=null" ng-src="http://images.crownit.in/others/{{option.icon}}">
          <img ng-if="option.icon==null" ng-src="https://crownit.in/wp-content/themes/crownit-theme/images/faq_default_icon.png">
      </span>
      <span class="faq_name">{{option.name}}</span>
      <span class="arrow">
          <img src="images/right_arrow.png">
      </span>
    </a>

Controller

$scope.getCateId = function(obj, $event){
    $rootScope.cateId = obj.target.id;
    console.log($rootScope.cateId);
};

上面的代码应该返回点击的id <a>标签，但我面临的问题是还有更多 <span>在<a>标签，因此当我单击跨度的空间时，它的目标是 <span>标签没有 id，但是当我专门单击顶部可用空间时，没有内部 <span>覆盖然后就可以正常工作了。

如何获取 <a> 的 id即使我点击<span>空间？？

Answer 1

您只需将 option.id 传递给 ngClick 处理程序

<a  ng-click="getCateId(option.id)" id="{{option.id}}">

Controller 方法

$scope.getCateId = function(optionId){
    console.log(optionId);
};