el.bind ist keine Funktion Fehler in angularjs

Question

Ich benutze das Erstellen Kostüm-Anweisung in angularjs. Ich möchte das Fenster bei Klick auf data-target Element scrollen. aber seine zeigt den Fehler el.bind is not a function

in custome Richtlinie Code als Gebrüll,

'use strict'; 

app.directive("productfinderpage", ["$window","$document", function($window, $document) { 
    console.log("enter into directive"); 
    return { 
     restrict: "AC", 
     link: function() { 


      // get all anchors 

      var anchors = angular.element(document.querySelectorAll("a[data-target]")); 


      angular.forEach(anchors, function (el) { 
       el.bind("click", function (e) { 
        var targetLink = e.target.dataset.target; 
        var targetContext = angular.element(document.querySelector("[data-name=\"" + targetLink + "\"")); 
        var targetContextInt = targetContext.offsetTop; 
        // initiate scroll 
        scrollTo(scrollable, targetContextInt, 225); 
       }); 
      }); 


      // scroll to function 
      function scrollTo(element, to, duration) { 
       if (duration <= 0) return; 
       var difference = to - element.scrollTop; 
       var perTick = difference/duration * 10; 

       setTimeout(function() { 
        element.scrollTop = element.scrollTop + perTick; 
        if (element.scrollTop == to) return; 
        scrollTo(element, to, duration - 10); 
       }, 10); 
      } 

     } 
    }; 
}]); 

HTML-Code als Gebrüll,

<div productFinderPage class="modal-body"> 
    <div class="info" data-sticky="data-sticky"> 
     <div class="info-inner"> 
      <div class="lender-image">LOGO</div> 
      <div class="package-name"></div> 
      <div class="cta"> 
       <button class="primary">Add to Favorites</button> 
      </div> 
      <nav> 
       <ul class="info-section"> 
        <li><a href="#" data-target="basicInfo">Basic Information</a></li> 
        <li><a href="#" data-target="extInfo">Extended Information</a></li> 
        <li><a href="#" data-target="loanSize">Loan Size/LVR</a></li> 
        <li><a href="#" data-target="loanFees">Loan Fees</a></li> 
        <li><a href="#" data-target="services">Services</a></li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
    <div class="main-details"> 
     <div class="panel" data-name="basicInfo"> 
      <div class="panel-header">Basic Information</div> 
     </div> 
     <div class="panel" data-name="extInfo"> 
      <div class="panel-header">Extended Information</div> 
     </div> 
     <div class="panel" data-name="loanSize"> 
      <div class="panel-header">Loan Size</div> 
     </div> 
     <div class="panel" data-name="loanFees"> 
      <div class="panel-header">Loan Fees</div> 
     </div> 
     <div class="panel" data-name="services"> 
      <div class="panel-header">Services</div> 
     </div> 
    </div> 
</div> 

jsfiddle hier.

Answer 1

Wenn Sie über ein Winkelelement durchlaufen, erhalten Sie die einfachen Dokumentelemente, die wiederum zu einem Winkelelement umgewandelt werden müssen:

var anchors = angular.element(document.querySelectorAll("a[data-target]")); 

angular.forEach(anchors, function(ele) { 
    var el = angular.element(ele); 
    el.bind("click", function(e) { 
     .. 
    }); 
} 

Siehe this jsfiddle