Escaping the double curly braces {{ }} in Swig templates for AngularJS - node.js

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

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.

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

Instead of replacing interpolation sign of angular. Change defaults for swig. Following Code will do it.
var swig = require('swig');
swig.setDefaults({
varControls: ['[[', ']]']
});

Related

Call a service from twig template in symfony 4

I would like to know how I can call a service from twig template directly on Symfony 4. I am using it in each action like this:
public function indexAction(TranslatorInterface $translator, NavigationGenerator $navigationGenerator)
{
return $this->render('index/index.html.twig', [
'navigationItems'=>$navigationGenerator->getNavigation(self::class)
]);
}
In the template I call this:
{% for navigationItem in navigationItems.topNavigation['left'] %}
{{ navigationItem.label }}
{% endfor %}
In earlier bootstrap versions I could define the service as a global object in config.yml and use it directly from twig like this:
{ NavigationGenerator.getNavigation(ControllerName) }
Any hint how to do this in Symfony 4? There is no config.yml anymore.
You can still define twig global variables - they would just go in with the rest of the Twig configuration in config/packages/twig.yaml.
An alternative, and maybe better place to put that could be a Twig function. The service that defines the function (or filters) are as much a service as the controllers, and so you would type-hint your NavigationGenerator and anything else you needed, in the constructor, for use in the function that is being called from Twig.

Twig uses htmlspecialchars internally for escaping. How do I pass ENT_NOQUOTES?

I'm using Twig for an embedded application that renders a basic subset of HTML. However, it does not support " for double quotes, and simply shows quot; instead of ".
I want to achieve the equivalent of
htmlspecialchars($input_string, ENT_NOQUOTES);
Twig's documentation says that it uses htmlspecialchars internally for its escaping. How do I set this flag when escaping a particular string?
Use a custom escaping strategy.
Create a new escaping strategy called html_no_quotes as follows:
$twig
->getExtension(\Twig\Extension\CoreExtension::class)
->setEscaper('html_no_quotes', function($twig_environment, $string, $charset) {
return htmlspecialchars($string, ENT_NOQUOTES);
})
;
Then inside your template use your html_no_quotes escaping strategy as follows:
{{ someString | escape('html_no_quotes') }}
May be this is more suitable:
{{ someString | raw }}
https://twig.symfony.com/doc/3.x/filters/raw.html

What is the scrope of varibles in block in jinja?

First, I am not asking about something about loop (for)!
In Jinja, I feel confused about the valid scope of variables defined inside and outside a block. For example, If I define {% set a = ... %} inside a block, can I use it in another block? If I defined them in super-class, in the child class, in what kind of range can I use them? I found sometimes it is passed from one block to another (or from here to there), and sometimes not. I do not find any document to explain that.
(What I mean "pass" is to use {{a}} directly and it returns the valid value.)
Variables in block, for, macro and filter are all local. They are valid only inside these block.
Detail can be found here. An example given there is:
.. sourcecode:: jinja
{% macro angryhello name %}
{% set angryname = name|upper %}
Hello {{ name }}. Hello {{ name }}!
HELLO {{ angryname }}!!!!!!111
{% endmacro %}
The variable angryname just exists inside the macro, not outside it.

Array of multiple path is not working in Nunjucks for templates and partials

I'm using this gulp plugin to use nunjucks to make HTML management easier.
https://github.com/carlosl/gulp-nunjucks-render
gulp.task('default', function () {
return gulp.src('src/templates/*.html')
.pipe(nunjucksRender({
path: ['src/templates/'] // String or Array
}))
.pipe(gulp.dest('dist'));
});
I want to keep my templates and partials in different folders so I tried this to keep as path
path: ['src/templates', 'src/partials']
but it's not working.
Template render error: (unknown path)
Error: template not found: partials/side_nav.nunjucks
My setup
As far as I can see, the issue is in your include. You're already defining your base paths as 'src/templates' and 'src/partials'. Now nunchucks is trying to import src/templates/partials/side_nav.nunjucks and afterwards src/partials/partials/side_nav.nunjucks, which don't exist.
Solution 1
So you would have to include it without the partials part:
{% include "side_nav.nunjucks" %}
Solution 2
If you want to be explicit about your folders (both templates and partials), you could just set you base path to src instead, and include your files like you did:
{% extends "templates/layout_with_sidenav.nunjucks" %}
...
{% include "partials/side_nav.nunjucks" %}

What's the path for twig extends?

I am not using symphony, just twig.
My structure:
root
- assets
- Twig (library)
- templates
- main_template.twig
- child_template.twig
my main_template.twig is rendering just fine, but is unable to find the child_template.twig which is in the same folder.
I have tried using relative / full path but I can't the child_template to load. What's the path supposed to be? Do I need to do anything else besides adding the following to the child template? (and adding the blocks?)
{% extends "child_template.twig" %}
The path starts relative from the one you have provided in the loader of twig
config.php
require_once '/path/to/lib/Twig/Autoloader.php';
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem(__DIR__ . '/templates');
$twig = new Twig_Environment($loader);
child.twig.html
{% extends "main_template.twig" %}

Resources