javascript - AngularJS with Django - Conflicting template tags

ID : 10058

viewed : 20

Tags : javascriptdjangodjango-templatesangularjsjavascript

Top 5 Answer for javascript - AngularJS with Django - Conflicting template tags

vote vote

100

For Angular 1.0 you should use the $interpolateProvider apis to configure the interpolation symbols: http://docs.angularjs.org/api/ng.$interpolateProvider.

Something like this should do the trick:

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

Keep in mind two things:

  • mixing server-side and client-side templates is rarely a good idea and should be used with caution. The main issues are: maintainability (hard to read) and security (double interpolation could expose a new security vector - e.g. while escaping of serverside and clientside templating by themselves might be secure, their combination might not be).
  • if you start using third-party directives (components) that use {{ }} in their templates then your configuration will break them. (fix pending)

While there is nothing we can do about the first issue, except for warning people, we do need to address the second issue.

vote vote

90

you can maybe try verbatim Django template tag and use it like this :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>    {% verbatim %}  <div ng-app="">      <p>10 is {{ 5 + 5 }}</p>  </div>  {% endverbatim %}

vote vote

75

If you did separate sections of page properly then you can easily use angularjs tags in "raw" tag scope.

In jinja2

{% raw %}     // here you can write angularjs template tags. {% endraw %} 

In Django template (above 1.5)

{% verbatim %}         // here you can write angularjs template tags. {% endverbatim %} 
vote vote

60

We created a very simple filter in Django 'ng' that makes it easy to mix the two:

foo.html:

... <div>   {{ django_context_var }}   {{ 'angularScopeVar' | ng }}   {{ 'angularScopeFunction()' | ng }} </div> ... 

The ng filter looks like this:

from django import template from django.utils import safestring  register = template.Library()   @register.filter(name='ng') def Angularify(value):   return safestring.mark_safe('{{%s}}' % value) 
vote vote

58

So I got some great help in the Angular IRC channel today. It turns out you can change Angular's template tags very easily. The necessary snippets below should be included after your angular include (the given example appears on their mailing lists and would use (()) as the new template tags, substitute for your own):

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); }); 

Also, I was pointed to an upcoming enhancement that will expose startSymbol and endSymbol properties that can be set to whatever tags you desire.

Top 3 video Explaining javascript - AngularJS with Django - Conflicting template tags

Related QUESTION?