Detect clicked element by using directive

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>

I have written below directive to detect the x element of tour directive.But it always shows the parent div element even though I have clicked the x.So how can I do this ? Thanks in advance.

Directive

.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

This is the generated HTML on the browser:

<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>

Can you tell me how to access class="tour-close-tip" element within the above directive ? For me it always shows the ng-scope as the class.

Solution 1

You can either bind directly to that element or check which element has been clicked on, using the target attribute:

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

Solution 2

Your eventListener is not on the X but on the outer div element. One option would be to add the listener to the X element using a query selector on the element

You could try something like the following to get the X span and add the listener

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

Another probably better approach would be to use event delegation such as

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

  });

Edit: I see your comment regarding not using JQuery so this may not work as Angular doesn't support event delegation with .on as far as I am aware.

Solution 3

you could use this:

app.directive('myDir', [
  '$document',
  function($document) {
    return {
      restrict: 'A',
      scope: true,
      link: function(scope, element, attrs) {
        var x = angular.element(document.querySelector('.tour-close-tip'));
        x.bind('click', function() {
          console.log('clicked');
        });
      }
    };
  }
]);

here's a demo plnkr: http://plnkr.co/edit/cUCJRetsqKmSbpI0iNoJ?p=preview

there's a heading with class 'tour-close-tip' there, and we attached a click event to it.

try it out, click the heading and look in your browser's console.

from this demo hopefuly you can make progress with your code.

Comments

[Sampath]

Can you tell me the value of the selector ?

[Sampath]

Can I use this within my directive ?

[Asta]

The selector is just a css selector that targets the html within the element. So based on the original html span should do.

[Sampath]

Thanks a lot for your support :)

[Sampath]

Thanks a lot for your support :)

[Sampath]

Wow... Great. Thanks a lot my friend :)