Escaping the double curly braces {{ }} in Swig templates for AngularJS

Question

Swig templates and AngularJS both use the double curly brace notation. How can the double curlies be escaped in Swig for Angular?

Answer 1

Double curlies can be escaped with

{% raw %}

eg: {% raw %}{{ foobar }}{% endraw %}

Forces the content to not be auto-escaped. All swig instructions will be ignored and the content will be rendered exactly as it was given. See Swig manual/tags/raw.

Answer 2

Why not replacing the {{}} with [[]] in the templates by configuring AngularJS to accept [[]] as the new {{}}. Try this in your Angular-App-Config (tried with angularjs-1.2.4):

config(['$interpolateProvider',
    function($interpolateProvider) {
        // Swig uses {{}} for variables which makes it clash with the use of {{}} in AngularJS.
        // Replaced use of {{}} with [[]] in AngularJS to make it work with Swig.
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    }
])

Answer 3

Instead of replacing interpolation sign of angular. Change defaults for swig. Following Code will do it.

var swig = require('swig'); 
swig.setDefaults({
   varControls: ['[[', ']]'] 
});