Lösung zur Lösung des Konflikts zwischen Angular.Js- und Django-Tags

Vorwort

Jeder sollte wissen, dass die Vorlagensysteme von Django und Angular sehr ähnliche Tag-Systeme verwenden. Beispielsweise verwenden beide {{ content }}, um Variablennamen darzustellen. Daher kann es zu Konflikten kommen, wenn Django und Angular zusammen verwendet werden. Ich habe einige Lösungen online gefunden. Jetzt werde ich es mit Ihnen teilen, nachdem ich es zusammengefasst habe. Schauen wir es uns gemeinsam an.

1. Ändern Sie das Standard-Tag von AngularJs

Der folgende Code kann das ursprüngliche Tag von Angular in {[{ content }]} ändern.

Angular-Tags ändern

myModule.config(function($interpolateProvider) {
 $interpolateProvider.startSymbol('{[{');
 $interpolateProvider.endSymbol('}]}');
});

Dies ist eine relativ einfache und intuitive Methode. Der geänderte Code ist einfacher zu lesen und Sie können auf einen Blick erkennen, ob es sich um ein Django-Tag oder ein Angular-Tag handelt. Der Nachteil besteht darin, dass es leicht zu Konflikten mit Plug-Ins von Drittanbietern kommt (wenn das Plug-In von Drittanbietern Anweisungen und andere Tags verwendet).

2. Django anweisen, einen Teil der Vorlage nicht zu rendern

Ab Django 1.5 wird das Tag {% verbatim %} unterstützt (wörtlich bedeutet wörtliche Übersetzung), Django rendert den im wörtlichen Tag eingeschlossenen Inhalt nicht:

{% verbatim %}
 {{if dying}}Still alive.{{/if}}
{% endverbatim %}

Dieses Tag unterstützt keine Verschachtelung, aber Sie können dem Tag einen Namen hinzufügen:

{% verbatim myblock %}
 Avoid template rendering via the {% verbatim %}{% endverbatim %} block.
{% endverbatim myblock %}

Auf diese Weise sucht Django nach dem Endverbatim von myblock als Endmarkierung und das in der Mitte eingefügte Verbatim-Tag wird als verarbeitet uninterpretierter Teil von myblock.

Der Vorteil dieser Lösung besteht darin, dass sie die Komplexität des Codes nicht erhöht, außerdem von Django nativ unterstützt wird und keine Auswirkungen auf Angular hat. Der Nachteil besteht darin, dass an vielen Stellen viele wörtliche Tags verwendet werden können, was die Vorlage sehr unübersichtlich macht.

3. Verwenden Sie Plug-Ins von Drittanbietern

Derzeit ist das mir bekannte Django-Angular. Dieses Plugin bietet die Möglichkeit, Django- und Angular-Tags zu mischen.

Während Sie Angular-Tags korrekt analysieren, können Sie weiterhin Djangos if und andere Tags verwenden.

{% load djng_tags %}
{% angularjs ng %}
<div{% if ng %} ng-repeat="item in items"{% endif %}>
 <h4><a ng-href="{{ item.absolute_url }}"{% if not ng %} href="{{ item.absolute_url }}"{% endif %}>{{ item.name }}</a></h4>
 <img ng-src="{{ item.image.url }}"{% if not ng %} src="{{ item.image.url }}"{% endif %} width="{{ item.image.width }}" height="{{ item.image.height }}" />
 <div{% if ng %} ng-bind-html="item.description"{% endif %}>{% if not ng %}{{ item.description }}{% endif %}</div>
</div>
{% endangularjs %}

Der Nachteil dabei ist, dass die Einführung von Plug-Ins die Komplexität des Codes erhöht. Jeder im Team muss diese Schreibweise erlernen. Ich persönlich bin der Meinung, dass es auch einfacher ist, die Fehlerquote zu erhöhen.

Ich denke, die zweite Methode ist angemessener. Versuchen Sie, das Front-End und das Back-End zu trennen, und die Daten werden an Angular übergeben.

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels für alle beim Lernen oder bei der Arbeit hilfreich sein kann eine Botschaft zum Mitteilen.

Weitere verwandte Artikel zu Lösungen zur Lösung von Tag-Konflikten zwischen Angular.Js und Django finden Sie auf der chinesischen PHP-Website!