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?

1
Genmais 11 Sept. 2015 im 00:39

3 Antworten

Beste Antwort

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

3
Pankaj Parkar 10 Sept. 2015 im 21:40

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.

1
James 11 Sept. 2015 im 00:40

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.

0
Genmais 11 Sept. 2015 im 08:53