Rileva elemento cliccato da direttiva using

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> 

ho scritto qui di seguito direttiva per rilevare l'elemento x di tour directive .Ma si mostra sempre l'elemento padre div anche se ho cliccato il x.So come posso farlo ? Grazie in anticipo.

direttiva

.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

Questa è la HTML generato sul 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> 

Potete dirmi come accedere class="tour-close-tip" elemento all'interno della direttiva di cui sopra? Per me mostra sempre il ng-scope come classe.

Answer 1

è possibile associare direttamente a tale elemento o verificare quali elemento è stato cliccato, utilizzando l'attributo target:

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

Answer 2

EventListener non è su X ma sull'elemento div esterno. Una possibilità sarebbe quella di aggiungere l'ascoltatore all'elemento X utilizzando un selettore di query sull'elemento

Si potrebbe provare qualcosa di simile a quanto segue per ottenere il X arco e aggiungere l'ascoltatore

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

Un altro approccio probabilmente meglio sarebbe quella di utilizzare la delega evento come

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

    }); 

Edit: vedo il tuo commento per quanto riguarda non si utilizza JQuery quindi questo non può funzionare come un gular non supporta la delega degli eventi con .on per quanto ne so.

Answer 3

è possibile utilizzare questo:

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'); 
     }); 
     } 
    }; 
    } 
]); 

ecco una plnkr demo: http://plnkr.co/edit/cUCJRetsqKmSbpI0iNoJ?p=preview

c'è una rubrica con la classe di 'tour-vicino-punta' lì, e abbiamo attaccato un evento click ad esso.

provalo, fai clic sull'intestazione e guarda nella console del browser.

da questa demo speriamo che tu possa fare progressi con il tuo codice.