Ich bin sehr neu bei AngularJS und jetzt habe ich meine erste Direktive geschrieben. Die Direktive stellt eine Tabellenzeile dar und die Markuplooks sehen wie folgt aus:
<table>
<!--thead ...-->
<tbody>
<my-directive ng-repeat="(key, value) in object"></my-directive>
</tbody>
</table>
Die Direktive wird jedoch vor den umgebenden Tabellen-Tags gerendert / ausgedruckt. Mein DOM sieht also so aus:
<!-- multiple times -->
<my-directive></my-directive>
<table>...</table>
Hier ist meine Direktivendefinition
return {
restrict: "E",
templateUrl: "/my-directive.html",
link: function(scope, element, attrs){
}
};
Warum passiert das?
3 Antworten
Anders als tr, td, tbody, th Elemente werden innerhalb des table Elements niemals funktionieren. Sie sollten die Attribut-Direktive wirklich verwenden, damit sie innerhalb der Tabelle unterstützt werden kann, indem Sie restrict: "A", in der Direktive ausführen.
<tbody my-directive ng-repeat="(key, value) in object">
</tbody>
Wenn das andere Element als table vorhanden sein soll, können sie in th & td platziert werden
Wenn man mit dem übereinstimmt, was Pankaj gesagt hat, kann man die Direktive nicht aus der Tabelle heraus aufrufen, ihr ungültiges HTML. Ich kann jedoch verstehen, warum Sie restrict: 'E' verwenden möchten. Persönlich verwende ich meine Anweisungen gerne als Elemente.
Wenn Sie die Direktive weiterhin als HTML-Element verwenden möchten, besteht die einfachste Lösung darin, dass Ihre Direktive selbst die gesamte Tabelle rendert. Es könnte eine <table-for/> Direktive oder so etwas sein.
Dies war meine Problemumgehung für dieses Problem. Markup ist Markup am Ende des Tages, und Sie müssen sich immer noch an die Regeln halten.
Also bin ich zu folgendem Ansatz gekommen:
<tbody>
<tr my-directive ng-repeat="..."></tr>
</tbody>
Und ich habe meine Richtlinie auf Argumente beschränkt und es funktioniert. Danke für Ihre Hilfe.