父节点的自定义属性无法解析

Question

我有一个容器div，其中有一个自定义数据属性data-gid 。 单击该div内的元素时，我需要获取父div的自定义属性。

HTML

     <div ng-repeat="(key, qn) in list >
     <div data-gid="{{ qn.id }}" >
        <div id="child1">
           <button ng-click="getParents($event);">Click</button>
         </div>
     <div>
    </div>

s

$scope.getParents = function(evt){
  var elem = evt.target.parentNode.getAttribute('data-gid');
  console.log(elem); 
}

问题是我总是将data-gid为null 。 当我检查

console.log(evt.target.parentNode)

我得到的是

<div data-gid="" >

那么这是什么问题呢？

Answer 1

由于evt.target.parentNode将指向div#child1 evt.target.parentNode ，并且您需要找到其父级，因此您需要使用

evt.target.parentNode.parentNode.getAttribute('data-gid')

或者， 我建议您可以将qn.id直接传递给该函数

<button ng-click="getParents(qn.id);">Click</button>

Answer 2

将gid参数传递给函数

<div ng-repeat="(key, qn) in list >
 <div data-gid="{{ qn.id }}" >
    <div id="child1">
       <button ng-click="getParents(qn.id);">Click</button>
     </div>
 <div>
</div>




 $scope.getParents = function(gid){      
  console.log(gid); 
}