Detect an item with a button click using the 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 wrote a directive below to detect element x of the tour directive . But the parent div always displayed, although I press 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 }); } }; } ]); 

User interface

This is the generated HTML in 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 the class="tour-close-tip" element in the above directive? For me, it always shows ng-scope as a class.

Answer 1

You can directly link this element or check which element was clicked using the target attribute:

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

Answer 2

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

You can try something like the following to get the X range and add a listener

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

Another probably best approach is to use event delegation like

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

Change I see your comment regarding the use of jQuery, so this may not work, since Angular does not support event delegation with .on , as far as I know.

Answer 3

you can 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 is the plnkr demo: http://plnkr.co/edit/cUCJRetsqKmSbpI0iNoJ?p=preview

there is a heading with the class "tour-close-tip", and we attached a click event to it.

try it, click on the title and look in the console of your browser.

from this demo, I hope you can make progress with your code.