使用指令检测单击的元素

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指令的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')) {