Menu
Swig templates and AngularJS both use the double curly brace notation. How can the double curlies be escaped in Swig for Angular?
734
Interpolation in Angular In simple terms, when you send data from an Angular component to the template using the mustache syntax or what you would call double curly brackets (these: “{{ … }}”) it is called interpolation. You can use it with variables, objects and even functions.
The double curly brackets are not HTML but scripting code. The term inside, interest, is a placeholder, sort of like the name and address in a form letter. The string {{interest}} will be replaced when the HTML template is converted into straight HTML that is sent over the network to the user.
Expressions in AngularJS, are the statements that are to be evaluated, that is placed inside the double curly braces. The result of the evaluation will be returned exactly where the expression is defined. It helps in performing the data-binding.
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.
159
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(']]');
}
])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
