Question

我在指令链接函数

中有这种情况

angular.module('app', [])
  .directive('myDirective', function($document){
    return {
      link: function($scope, element){

        $document.on('click', function(event){
          var childElementWasClicked = element.find(event.target).length > 0;
          if(childElementWasClicked) return;
          $scope.hide();
        });

     }
   }
}

所以我觉得这并不适用于jquery lite的限制，但我真的想在不使用jquery（full）的情况下解决这个问题。我读了this，他们似乎用类来解决查找，但是当我有一个像event.target这样的元素对象时，我无法弄清楚如何解决它。

所有帮助将不胜感激！

Answer 1

嵌套子搜索以查看目标是否是元素的实际子元素。

function find ( parent, child ){
    var selector = (child.id || child.className) ? (child.id ? "#" + child.id : "." + child.className) : child.nodeName,
        children = parent.querySelectorAll( selector ),
        isChild = false,
        item;

    for(var i = 0, l = children.length; i<l; i++){
        item = children[i];
        if( child.isEqualNode(item) ) {
            isChild = true;
            break;
        }
    }

    return isChild;
}

Answer 2

我最后查看了this component的源代码，并且做了类似于完成一个的方式，基本上是这样的：

$document.on('click', function(event){
  var target = event.target.parentElement;
  var parentFound = false;
  while(angular.isDefined(target) && target !== null && !parentFound){
     if(target === element[0]){
       parentFound = true;
     }
     target = target.parentElement;
  }
  if(parentFound) return;
  $scope.hide();
});

Answer 3

可能的一种解决方案可能是： （基于元素，没有类或ID）

$document.on('click', function(event){
   var children = Array.prototype.slice.call(element.querySelectorAll('*'));
   var childElementWasClicked = children.indexOf(event.target) != -1;
   if(childElementWasClicked) return;
   $scope.hide();
});

低于工作测试。

＆＃13;

var element = $('#d0')[0];

$(document.body).on('click' , function(event){ // <-- just to simulate jqueryLite

    var children = Array.prototype.slice.call(element.querySelectorAll('*'));
    var childElementWasClicked = children.indexOf(event.target) != -1;
    
  if(childElementWasClicked) {
      var id = children[children.indexOf(event.target)].id;
      $(this).append($('<div class="dbg">you clicked on : ' +  id + '</div>')
      .delay(1000).hide(777));
    };
  

});

＆＃13;

div{
  border : solid 1px #EEE;
  margin-left : 5px;
  padding : 3px;
  font-size : 0.8em;
  }
.dbg{
  position : absolute;
  top:0;
  border : solid 1px red;
  background : #FFF;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='d0'>
  <div id='d0.0'>0.0</div>
  <div id='d0.1'>0.1</div>
  <div id='d0.2'>0.2
    <div id='d0.2.0'>0.2.0</div>
    <div id='d0.2.1'>0.2.1</div>
    <div id='d0.2.2'>0.2.2</div>
    <div id='d0.2.3'>0.2.3</div>
  </div>
  <div id='d0.3'>0.3</div>
</div>
<div id='d1'>
  <div id='d1.0'>1.0</div>
  <div id='d1.1'>1.1</div>
  <div id='d1.2'>1.2
    <div id='d1.2.0'>1.2.0</div>
    <div id='d1.2.1'>1.2.1</div>
    <div id='d1.2.2'>1.2.2</div>
    <div id='d1.2.3'>1.2.3</div>
  </div>
  <div id='d1.3'>0.3</div>
</div>

＆＃13;

用jquery lite替换element.find（el）

3 个答案: