AngularJS avec Django - Balises de gabarit en conflit

Question

Je veux utiliser AngularJS avec Django mais ils utilisent tous les deux {{ }} comme balises de template. Y at-il un moyen facile de changer l'un des deux pour utiliser un autre tag de modèle personnalisé?

Answer 1

Angulaire 1.0 vous devez utiliser le $interpolateProvider api pour configurer l'interpolation des symboles: http://docs.angularjs.org/api/ng.$interpolateProvider.

Quelque chose comme ceci devrait faire l'affaire:

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

Garder à l'esprit deux choses:

• mélanger côté serveur et côté client modèles est rarement une bonne idée et devrait être utilisé avec prudence. Les principaux problèmes sont: la maintenabilité (difficile à lire) et de sécurité (double interpolation pourrait exposer un nouveau vecteur de sécurité - par exemple, tout en s'échappant de serverside et de templating côté client par eux-mêmes pourraient être sécurisé, leur combinaison peut ne pas l'être).
• si vous commencez à l'aide de tiers directives (composants) {{ }} dans leurs modèles, alors votre configuration va les briser. (corrigé en attente)

Alors qu'il n'y a rien que nous pouvons faire à propos de la première question, sauf pour avertir les gens, nous avons besoin pour répondre à la deuxième question.

Answer 2

vous pouvez peut-être essayer in extenso la balise de modèle Django et utilisez-le comme ceci :

Answer 3

Si vous n’a séparé les sections de page correctement alors vous pouvez facilement utiliser angularjs tags dans la portée de l’étiquette « brut ».

Dans jinja2

Dans modèle de Django (au-dessus de 1,5)

Answer 4

Nous avons créé un filtre très simple en Django « ng », ce qui le rend facile à mélanger les deux :

foo.html :

Answer 5

Donc j'ai eu de une grande aide dans l'angle d'un canal IRC, aujourd'hui. Il s'avère que vous pouvez modifier Angulaire du modèle de balises très facilement. La nécessaire les extraits ci-dessous doivent être inclus après votre angulaire comprennent (l'exemple donné apparaît sur leurs listes de diffusion et utiliserait (()) comme le nouveau modèle de balises, de remplacer votre propre):

angular.markup('(())', function(text, textNode, parentElement){
  if (parentElement[0].nodeName.toLowerCase() == 'script') return;
  text = text.replace(/\(\(/g,'{{').replace(/\)\)/g, '}}');
  textNode.text(text);
  return angular.markup('{{}}').call(this, text, textNode, parentElement);
});

angular.attrMarkup('(())', function(value, name, element){
    value = value.replace(/\(\(/g,'{{').replace(/\)\)/, '}}');
    element[0].setAttribute(name, value);
    return angular.attrMarkup('{{}}').call(this, value, name, element);
});

Aussi, j'ai été rappelé pour une prochaine amélioration, qui va exposer startSymbol et endSymbol propriétés qui peuvent être définies à ce que les balises que vous désirez.