使用指令

Question

HTML

<div my-dir>
   <tour step=" currentstep">
       <span tourtip="Few more steps to go."
        tourtip-next-label="Close"
        tourtip-placement="bottom"
        tourtip-offset="80"
        tourtip-step="0">
      </span>
   </tour>
</div>

我已经写了下面的指令来检测tour directive的x元素。但它总是显示父div元素，即使我点击了x.So我怎么能这样做？提前谢谢。

指令

.directive('myDir', [
  '$document',
  function($document) {

    return {
      restrict: 'A',
      scope: true,
      link: function(scope, element, attrs) {

        element.on('click', function(e) {
          scope.$apply(function() {
            if (element[0].className === 'tour-close-tip') {
              console.log('my task');
            }
          });
          e.stopPropagation(); //stop event from bubbling up to document object
        });

      }
    };
  }
]);

UI

这是浏览器上生成的HTML：

<div hide-element-when-clicked-out-side="" class="ng-scope">
   <tour step=" currentstep" class="ng-scope">
     <span tourtip="Few more steps to go.!" tourtip-next-label="Close" tourtip-placement="bottom" tourtip-offset="80" tourtip-step="0" class="ng-scope">
      </span><div class="tour-tip" tour-popup="" style="display: block; top: 80px; left: 0px;">
    <span class="tour-arrow tt-bottom"></span>
    <div class="tour-content-wrapper">
        <p ng-bind="ttContent" class="ng-binding">Few more steps to go.!</p>
        <a ng-click="setCurrentStep(getCurrentStep() + 1)" ng-bind="ttNextLabel" class="small button tour-next-tip ng-binding">Close</a>
        <a ng-click="closeTour()" class="tour-close-tip">×</a>
    </div>
</div>

 

您能告诉我如何在上述指令中访问class="tour-close-tip"元素吗？对我而言，它总是将ng-scope显示为类。

Answer 1

您可以使用target属性直接绑定到该元素或检查已点击的元素：

element.on('click', function (e) {
  scope.$apply(function () {
    if (angular.element(e.target).hasClass('tour-close-tip')) {

Answer 2

您的eventListener不在X上，而在外部div元素上。一种选择是使用元素

上的查询选择器将侦听器添加到X元素

您可以尝试使用以下内容获取X范围并添加侦听器

element[0].querySelector('span').on...

另一种可能更好的方法是使用事件委托，例如

  element.on('click', selector, function(e){       

  });

编辑：我看到你关于不使用JQuery的评论所以这可能不起作用，因为据我所知，Angular不支持使用.on进行事件委派。