Looping durch untergeordnete Elemente des DOM-Elements in der Direktive

Question

In dieser plunk habe ich eine Direktive, die Elemente an das DOM anfügt. Wenn ich versuche, children() in einer Schleife zu verwenden, bekomme ich eine Ausnahme, dass forEach keine Funktion ist. Da children() ein Array zurückgibt, habe ich erwartet, dass dies funktioniert. Wie bekomme ich die Kinder?

Javascript:

directive.link = function (scope, element, attrs) { 

    var wrap = angular.element('<div id="wrap"></div>'); 
    var wrapc = $compile(wrap)(scope) 
    element.append(wrapc); 

    var node1 = angular.element('<div id="node1"></div>'); 
    var node1c = $compile(node1)(scope) 
    wrapc.append(node1c); 

    var node2 = angular.element('<div id="node2"></div>'); 
    var node2c = $compile(node2)(scope) 
    wrapc.append(node2c); 

    var children = wrapc.children(); 
    children.forEach(function(elem){ // <-- this doesn't work 
     console.log(elem.attr('id')); 
    }); 

}; 

Answer 1

Ich weiß nicht, ob das, was Sie erreichen müssen, aber ich würde es so schreiben:

var children = wrapc.children(); 
angular.forEach(children, function(value, key){ 
    console.log(children[key].id)); 
}); 

Answer 2

Die Methode jQuery .attr() die Ausnahme wirft, Ich konnte es beheben, indem ich es änderte, um .id von Javascript zu verwenden.

Aktualisiert Plunker: http://plnkr.co/edit/OT0fSnryaY7A4hmeZLj9?p=preview