Mixing AngularJS and Django Template placeholders

I've blogged before on how to use AngularJS with Django, who both share the same {{ }} placeholders. The trick there was to keep using {{ }} for Django, and <[ ]> (or any other combo) for AngularJS.


This works well but there's a gotcha: What if you depend on 3rd party AngularJS libraries that depend on template fragments that use {{ }}? This is what happened when I used the excellent Angular Schema Form package: the forms wouldn't render properly because AngularJS no longer recognizes the {{ }} placeholders.


My workaround for this is to not use alternative placeholders for AngularJS, but do use <[ ]> (or, again, any other combo) in Django templates for AngularJS code and replace that after Django's template rendering to {{ }}.

So, <[ {{ variable }} ]> will be rendered to <[ x.y ]> (assuming variable is "x.y") which will then be transformed to {{ x.y }} which AngularJS can handle.

The following code can be used to do this placeholder replace:

from django.template import loader, RequestContext
from django.http import HttpResponse
def render(request, *args, **kwargs):
Returns a HttpResponse whose content is filled with the result of calling
django.template.loader.render_to_string() with the passed arguments.
Uses a RequestContext by default.
httpresponse_kwargs = {
'content_type': kwargs.pop('content_type', None),
'status': kwargs.pop('status', None),
} if 'context_instance' in kwargs:
context_instance = kwargs.pop('context_instance')
if kwargs.get('current_app', None):
raise ValueError('If you provide a context_instance you must '
'set its current_app before calling render()')
current_app = kwargs.pop('current_app', None)
context_instance = RequestContext(request, current_app=current_app)
kwargs['context_instance'] = context_instance s = loader.render_to_string(*args, **kwargs)
s = s.replace("<[", "{{").replace("]>", "}}") # <- magic happens *here*
return HttpResponse(s, **httpresponse_kwargs)

This is actually Django's render with a minor modification.


And finally, of course, remove the $interpolateProvider startSymbol/endSymbol change if you have any.



Last updated Aug. 17, 2014, 11:32 a.m. | filed under django | django angularjs
comments powered by Disqus