Angular Richtlinie Tabellenzeilen Ausgabe

Question

Ich bin ein Anfänger Angular Programmierer, aber ich bin wirklich in der Nähe der Richtlinien zu verstehen.

Ich erstelle ein fiddle here, aber ich habe Geige nie benutzt, und es ist nicht ganz rendert ...

die tr-Reihe ist eine Richtlinie. Ich versuche, die Daten durchzulaufen und eine Direktive (Zeile) pro Datensatz zu drucken. HTML:

<table ng-controller="fiddleCtrl"> 
    <thead> 
     <th>id</th> 
     <th>name</th> 
     <th>description</th> 
    </thead> 
    <tbody> 
    <tr><tr-row ng-repeat="d in data" scdata="d"></tr-row></tr> 
    </tbody> 
</table> 

javascript:

var myapp = angular.module('myApp', []) 
.controller('fiddleCtrl', ['$scope', function ($scope) { 

$scope.data = [ 
    { id: 1, name: 'Fred', description: 'not the best worker' }, 
    { id: 2, name: 'Wilma', description: 'Freds Wife'}, 
    { id: 3, name: 'Barney', description: 'Freds best friend'}, 
    { id: 4, name: 'Louise', description: 'Never heard of Fred'}, 
    { id: 5, name: 'Tracy', description: 'Some Chick'}, 
    { id: 6, name: 'Foo', description: 'Inventer of bar'} 
]; 
}]).directive('trRow', function ($compile) { 
return { 
    restrict: "E", 
    replace: true, 
    link: function (scope, element, attrs) { 
     scope.id = scope.d.id; 
     scope.name = scope.d.name; 
     scope.desc = scope.d.description; 

     var tmpl = '<tr ><td>{{id}}</td><td><strong>{{name}}</strong></td><td>{{desc}}</td></tr>'; 
     element.html(tmpl).show(); 
     //var e =$compile(tmpl)(scope); 
     //element.replaceWith(e); 
     var e = $compile(element.contents())(scope); 
    }, 
    scope: { 
     d: "=" 
    } 
}; 
}); 

sollte einfach sein. (le seufz)

jede Hilfe würde geschätzt werden, ich muss wirklich dies verstehen.

Was in meinem Code geschieht, ist die tr-Reihe Richtlinie der Tabelle ersetzen. Ich bekomme eine Liste von ihnen, (mit einem INSIDE von einem tr-Zeile Element, aber es gibt keine Tabelle, um sie anzuzeigen. Ich weiß, das bedeutet, ich bin in der Nähe, aber ich kann nicht an neue Kombinationen zu versuchen.

ich brauche nur eine einfache Tabelle mit Zeilen drin.

ich appologise wenn diese eine Million mal gefragt wurde, scheine ich nicht sicher zu sein, was zu suchen. ich habe so viele Dinge ausprobiert.

Answer 1

Erstens Ein Tag-Name darf kein Bindestrich enthalten. Daher können Sie tr-row nicht als Tag-Name verwenden, aber Sie können ihn als Attribut verwenden.

Dann können Sie einfach eine Richtlinie so schreiben:

.directive('trRow', function() { 

    return { 
     template: '<tr><td ng-bind="row.id"></td><td><strong ng-bind="row.name"></strong></td><td ng-bind="row.description"></td></tr>' 
    }; 
}); 

Und Nutzung ist wie folgt aus:

<tbody> 
    <tr tr-row ng-repeat="row in data"></tr> 
</tbody> 

Ein Arbeitsbeispiel in Geige: http://jsfiddle.net/T7k83/85/

Answer 2

Eigentlich ist dieses Problem spezifisch für <table> Elemente.

Browser analysieren Engines nicht wie ungültige Tags innerhalb <table>, so werden sie versuchen, Ihre Anweisung aus der Tabelle zu werfen (Sie können dies durch die Prüfung des Elements sehen), bevor Ihre Richtlinie die Möglichkeit hat, sich durch gültige Elemente zu ersetzen . Dies gilt auch, wenn Ihre Direktive keinen Bindestrich im Namen enthält.

Der Weg, um dies zu lösen, wäre die Verwendung der Anweisungstyp A anstelle des Typs E, die von @MuratCorlu vorgeschlagen wird.

Für andere Elemente wie <div> können Sie es praktisch durch benutzerdefinierte Tags mit Namen mit Bindestrich ersetzen. Zum Beispiel ng-repeat kann als ein Tag verwendet werden.