2015-04-22 3 views
7

HTMLklickten Element Detect durch Direktive

<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 unten Richtlinie geschrieben haben das x Element von tour directive zu erkennen .Aber es immer das Element Mutter div zeigt, obwohl ich die x.So geklickt haben, wie Darf ich das machen ? Danke im Voraus.

Richtlinie

.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

enter image description here

Dies ist die erzeugte HTML im 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> 

Können Sie mir sagen, wie class="tour-close-tip" Element innerhalb der oben genannten Richtlinie zugreifen? Für mich zeigt es immer die ng-scope als Klasse an.

Antwort

5

können Sie entweder binden direkt an das Element oder prüfen, welches Element angeklickt wurde, mit dem target Attribut:

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

Wow ... Großartig. Vielen Dank mein Freund :) – Sampath

2

Ihr EventListener ist nicht auf dem X, sondern auf dem äußeren div-Element. Eine Möglichkeit wäre, den Hörer an das X Element hinzufügen unter Verwendung einer Abfrage Selektor auf das Element

Man könnte so etwas wie die folgende bekommen die X Spanne versuchen und fügen Sie den Hörer

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

Another wahrscheinlich besser Ansatz Ereignis Delegation zu verwenden, wie

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

    }); 

bearbeiten wäre: ich sehe Ihren Kommentar in Bezug auf nicht mit JQuery so kann dies als nicht funktionieren gular unterstützt keine Ereignisdelegation mit .on, soweit mir bekannt ist.

+0

Können Sie mir sagen, der Wert des 'selector'? – Sampath

+0

Der Selektor ist nur ein CSS-Selektor, der auf den HTML-Code innerhalb des Elements abzielt.Also sollte das auf dem ursprünglichen html 'span' basieren. – Asta

+0

Vielen Dank für Ihre Unterstützung :) – Sampath

1

Sie könnten so:

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

hier eine Demo plnkr: http://plnkr.co/edit/cUCJRetsqKmSbpI0iNoJ?p=preview

gibt es eine Rubrik mit Klasse 'Tour-close-Spitze' dort, und wir an es ein Click-Ereignis.

probieren Sie es aus, klicken Sie auf die Überschrift und schauen Sie in der Konsole Ihres Browsers.

von dieser Demo hoffentlich können Sie Fortschritte mit Ihrem Code machen.

+0

Kann ich dies innerhalb meiner Direktive verwenden? – Sampath

+0

Vielen Dank für Ihre Unterstützung :) – Sampath

Verwandte Themen