Angular.Js と Django タグ間の競合を解決するソリューション

前書き

Django と Angular のテンプレート システムは非常によく似たタグ システムを使用していることを誰もが知っているはずです。たとえば、どちらも変数名を表すために {{ content }} を使用します。したがって、Django と Angular を一緒に使用すると競合が発生する可能性があります。オンラインでいくつかの解決策を見つけました。では、まとめてご紹介しますので、一緒に見ていきましょう。

1. AngularJs のデフォルトのタグを変更する

次のコードは、Angular の元のタグを {[{ content }]} に変更できます。

Angularタグを変更する

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

これは比較的シンプルで直感的な方法です。変更されたコードは読みやすくなり、Django タグなのか Angular タグなのかが一目でわかります。欠点は、サードパーティのプラグインと競合しやすいことです (サードパーティのプラグインが命令やその他のタグを使用している場合)。

2. テンプレート コンテンツの一部をレンダリングしないように Django に指示します

Django 1.5 以降では、{% verbatim %} タグがサポートされており (verbatim は文字通り逐語的翻訳を意味します)、Django は逐語的タグ パッケージのコンテンツをレンダリングしません。

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

このタグはネストをサポートしていませんが、タグに名前を追加できます:

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

このようにして、Django は、終了マークとして myblock の末尾を検索します。途中に挿入されたverbatimタグはmyblockの未説明部分として処理されます。

このソリューションの利点は、コードの複雑さを増やさず、Django によってネイティブにサポートされており、Angular に影響を与えないことです。欠点は、多くの逐語的タグがさまざまな場所で使用される可能性があり、テンプレートが非常に煩雑になることです。

3. サードパーティのプラグインを使用する

現在、私が知っているプラ​​グインは django-angular です。このプラグインには、Django タグと Angular タグを混合する機能があります。

角度タグを正しく解析しながら、Django の if タグやその他のタグを引き続き使用できます。

{% 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 %}

このデメリットは、プラグインを導入するとコードが複雑になるため、チーム全員がこの書き方を学ぶ必要があることですが、個人的にはエラーが増えやすいと感じています。

変数を記述するときは、フロントエンドとバックエンドを分離するようにしてください。データは Angular に渡されます。

概要

上記がこの記事の全内容です。この記事の内容が皆さんの学習や仕事に少しでも役立つことを願っています。ご質問がある場合は、メッセージを残して連絡してください。

Angular.Js と Django の間のタグ競合を解決するソリューションに関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。