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?

score 26 · Accepted Answer · answered Sep 07 '14 at 13:30

26

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.

answered Sep 07 '14 at 13:30

orszaczky

13,301
8
47
54

score 14 · Answer 2 · edited May 14 '15 at 16:14

14

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(']]');
    }
])

edited May 14 '15 at 16:14

Yves M.

29,855
23
108
144

answered Sep 08 '14 at 15:23

Martin

641
1
9
16

5

I only need to escape a single instance on the index layout served by Express, the rest of the pages are handled by Angular, so reconfiguring Angular just for this wouldn't make sense in my case. Might be a good solution for others though. – Jack Gerson Sep 09 '14 at 05:46

score 9 · Answer 3 · edited Dec 02 '15 at 12:16

9

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

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

edited Dec 02 '15 at 12:16

user1438038

5,821
6
60
94

answered Dec 02 '15 at 11:57

Sandip Nirmal

2,283
21
24

[http://paularmstrong.github.io/swig/docs/api/](http://paularmstrong.github.io/swig/docs/api/) – Sandip Nirmal Dec 02 '15 at 11:59
[http://node-swig.github.io/swig-templates/docs/api/#SwigOpts](http://node-swig.github.io/swig-templates/docs/api/#SwigOpts) – csum Aug 15 '19 at 22:42

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

3 Answers3