Schleife durch die Kinder eines Elements in einer AngularJS-Direktive

Question

Ich habe ein Problem - ich habe vergessen zu programmieren! Ich habe eine angularJS-Direktive, die sich auf einem Eltern-Wrapper-Tag (einem DIV) befindet, und in meiner Direktive möchte ich die Kinder durchlaufen (erste Child-DIVs). Ich habe nach dem

<div data-check-attributes> 
    <div data-ng-repeat="user in Users" data-id="{{ user.ID }}" data-ng-click="doSomething(user.ID)" data-new="{{ user.newUser }}" class=""> 
    <div> {{ user.userName }} </div> 
    <div> {{ user.userAge }} </div> 
    </div> 
</div> 

jetzt in meiner Richtlinie wünsche ich durch das erste Kind divs Schleife (es gibt viele von ihnen sein könnte, aber ich sehe 10 Benutzer in meiner geladenen Ansicht) und bestimmte Kontrollen und Änderungen in meine Anweisung, die Datenattribute, das $ location-Objekt und potentiell viele mehr verwendend, aber ich kann mich nicht erinnern, wie man die ersten Kinddivs durchläuft, ich scheine Fehler mit allem, was ich versucht habe, zu bekommen ... soweit habe ich das, was nicht funktioniert! Im Beispiel unten Ich möchte nur die Daten-ID des ersten untergeordneten Knoten in die Konsole

.directive('checkAttributes', function ($location) { 
     return{ 
      restrict: 'A', 
      link: function (scope, element) { 

      // will use $location later 

       console.log(angular.element(element)[0]); // this outputs the HTML 
       console.log(angular.element(element)[0].children().length); // this errors, TypeError: object is not a function 

       for (var i = 0; i < angular.element(element)[0].children.length; i++) { 
        console.log(angular.element(element)[0].children[i].getAttribute('data-id')); 
       } 

      } 
     }; 
    }); 

Ich bin verwirrt ... bitte helfen schreiben!

Answer 1

Wenn Sie versuchen, auf Eigenschaft des HTMLElement zuzugreifen, sollten Sie es wie Eigenschaft lesen.

Eine andere Sache ist, dass element ist bereits eine Instanz von angular.element so dass keine Notwendigkeit, es wieder zu wickeln:

console.log(element[0]); // DOM element 
console.log(element[0].children.length); 

Allerdings gibt es eine Reihe von Convenience-Methoden angular.element Objekt zur Verfügung stellt. Diese Methoden replizieren einige der jQuery-Methoden, einschließlich $.fn.children Methode. In diesem Fall alternativ können Sie

console.log(element); // angular.element instance 
console.log(element.children().length); 

tun Und schließlich gibt es eine weitere Einschränkung: ngRepeat seine Elemente nach Ihrer benutzerdefinierten Richtlinie machen, so können Sie children Sammlung noch nicht zugreifen. Einfachste Lösung ist, Ihren Code in $timeout Service zu setzen, das Ihre Logik in dem nächsten Digest Zyklus ausgeführt wird, garantiert nach ngRepeat abgeschlossen ist:

app.directive('checkAttributes', function($location, $timeout) { 
    return { 
     restrict: 'A', 
     link: function(scope, element) { 

      // will use $location later 
      $timeout(function() { 
       for (var i = 0; i < element[0].children.length; i++) { 
        console.log(element[0].children[i].getAttribute('data-id')); 
       } 
      }); 

     } 
    }; 
}); 

Demo:http://plnkr.co/edit/oEOSY2e2E0mmLDQOHbff?p=preview