Solution pour résoudre le conflit entre les balises Angular.Js et Django

Préface

Tout le monde doit savoir que les systèmes de modèles de Django et Angular utilisent des systèmes de balises très similaires. Par exemple, ils utilisent tous deux {{ content }} pour représenter les noms de variables. Par conséquent, des conflits peuvent survenir lorsque Django et Angular sont utilisés ensemble. J'ai trouvé des solutions en ligne. Je vais maintenant le partager avec vous après l’avoir résumé. Examinons-le ensemble.

1. Changez la balise par défaut d'AngularJs

Le code suivant peut changer la balise d'origine d'Angular en {[{ content }]}.

Modifier les balises angulaires

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

C'est une méthode relativement simple et intuitive. Le code modifié est plus facile à lire et vous pouvez savoir en un coup d'œil s'il s'agit d'une balise Django ou d'une balise Angular. L'inconvénient est qu'il est facile d'entrer en conflit avec des plug-ins tiers (si le plug-in tiers utilise des instructions et d'autres balises).

2. Dites à Django de ne pas restituer une partie du modèle

À partir de Django 1.5, la balise {% verbatim %} est prise en charge (verbatim signifie traduction textuelle, littéralement ), Django ne restituera pas le contenu enveloppé dans la balise verbatim :

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

Cette balise ne prend pas en charge l'imbrication, mais vous pouvez ajouter un nom à la balise :

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

De cette façon, Django cherchera le verbatim de fin de monbloc comme marque de fin, et la balise verbatim insérée au milieu sera traitée comme un partie non interprétée de myblock.

L'avantage de cette solution est qu'elle n'augmente pas la complexité du code, et qu'elle est supportée nativement par Django et n'a aucun impact sur Angular. L’inconvénient est que de nombreuses balises verbatim peuvent être utilisées à de nombreux endroits, ce qui rend le modèle très compliqué.

3. Utilisez des plug-ins tiers

Actuellement, celui que je connais est Django-angular. Ce plugin a la capacité de mélanger les balises Django et Angular.

Tout en analysant correctement les balises angulaires, vous pouvez continuer à utiliser les balises if et d'autres balises de Django.

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

L'inconvénient est que l'introduction de plug-ins augmente la complexité du code. Tout le monde dans l'équipe doit apprendre cette façon d'écrire. Personnellement, je pense qu'il est également plus facile d'augmenter les erreurs.

Je pense que la deuxième méthode est plus appropriée. Lors de l'écriture de variables, essayez de séparer le front et le back end. Django est responsable du retour des modèles statiques et les données sont transmises à Angular.

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra être utile aux études ou au travail de chacun. Si vous avez des questions, vous pouvez partir. un message à communiquer.

Pour plus d'articles sur les solutions permettant de résoudre les conflits de balises entre Angular.Js et Django, veuillez faire attention au site Web PHP chinois !