Solution to solve the conflict between Angular.Js and Django tags

Preface

Everyone should know that the template systems of Django and Angular use very similar tag systems. For example, they both use {{ content }} to represent variable names. Therefore, conflicts may occur when Django and Angular are used together. I found some solutions online. Now I will share it with you after summarizing it. Let’s take a look at it together.

1. Change the default tag of AngularJs

The following code can change the original tag of Angular to {[{ content }]}.

Modify Angular tags

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

This is a relatively simple and intuitive method. The modified code is easier to read, and you can tell at a glance whether it is a Django tag or an Angular tag. The disadvantage is that it is easy to conflict with third-party plug-ins (if the third-party plug-in uses instructions and other tags).

2. Tell Django not to render part of the template

Starting from Django 1.5, the {% verbatim %} tag is supported (verbatim means verbatim translation, literally ), Django will not render the content wrapped in the verbatim tag:

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

This tag does not support nesting, but you can add a name to the tag:

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

In this way, Django will look for the endverbatim of myblock as the end mark, and the verbatim tag inserted in the middle will be processed as an unexplained part of myblock.

The advantage of this solution is that it does not increase the complexity of the code, and it is natively supported by Django and has no impact on Angular. The disadvantage is that many verbatim tags may be used in many places, making the template very messy.

3. Use third-party plug-ins

Currently, the one I know is django-angular. This plugin has the ability to mix Django and Angular tags.

While correctly parsing angular tags, you can continue to use Django's if and other tags.

{% load djng_tags %}
{% angularjs ng %}
<div{% if ng %} ng-repeat="item in items"{% endif %}>
 <h4 id="a-nbsp-ng-href-nbsp-item-absolute-url-nbsp-nbsp-if-nbsp-not-nbsp-ng-nbsp-nbsp-href-nbsp-item-absolute-url-nbsp-nbsp-endif-nbsp-nbsp-item-name-nbsp-a"><a ng-href="{{ item.absolute_url }}"{% if not ng %} href="{{ item.absolute_url }}"{% endif %}>{{ item.name }}</a></h4>
 <img  src="/static/imghwm/default1.png"  data-src="{{ item.image.url }}"  class="lazy"  ng-{% if not ng %} {% endif %}    style="max-width:90%" height="{{ item.image.height }}" / alt="Solution to solve the conflict between Angular.Js and Django tags" >
 <div{% if ng %} ng-bind-html="item.description"{% endif %}>{% if not ng %}{{ item.description }}{% endif %}</div>
</div>
{% endangularjs %}

The disadvantage of this is that introducing plug-ins increases the complexity of the code. Everyone in the team needs to learn this way of writing. I personally feel that it is also It is easier to increase errors.

I think the second one is more appropriate. When writing variables, try to separate the front and back ends. Django is responsible for returning static templates and the data is handed over to Angular. There is no big problem.

Summary

The above is the entire content of this article. I hope the content of this article can bring some help to everyone's study or work. If you have any questions, you can leave a message to communicate.

For more articles on solutions to resolve tag conflicts between Angular.Js and Django, please pay attention to the PHP Chinese website!