3

I am trying to use both flask and angular.js. While rendering a page with flask, I tried to add some angular js and the two templating methods (tags) clash.

I want something like:

<div>
    {{ flaskReplacesThis }}
</div>
<div>
    {%?! Ignore this, flask! %?}
    {{ angularReplacesThis }}
    {%?! endIgnore %?}
</div>

Is it:

  • a bad idea all round, and I should abandon hope, or
  • should I roll my own solution (if so, how?).

I've tried googling and haven't seen anything I can fully understand / make use of.

vivekagr
  • 1,786
  • 15
  • 23
babyshark
  • 65
  • 8

2 Answers2

12

You can use the raw block. Anything inside it won't be processed as jinja2 syntax.

<div>
    {{ flaskReplacesThis }}
</div>
<div>
    {% raw %}
    {{ angularReplacesThis }}
    {% endraw %}
</div>

Here is the documentation link for it.

vivekagr
  • 1,786
  • 15
  • 23
  • thank you!! :-) right now my angular replacing is broken though, lol. But I'm pretty sure it's something I'm doing wrong... – babyshark Mar 27 '14 at 20:35
3

It is usually not recommended to mix server side templating (jinja2) and client side templating (angular) together but it is possible. You could try using the $interpolateProvider feature of angularjs which lets you define a custom set of delimiters. Since jinja2 uses {{ and }} as delimiters as well, may be you could tell angular to use something different, say [[ and ]]

<script>
var customInterpolationApp = angular.module('customInterpolationApp', []);

customInterpolationApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
 .......

See here for the official documentation

codegeek
  • 32,236
  • 12
  • 63
  • 63
  • ooh... that's nifty too. thank you! yeah I had a feeling that this was a bad idea all round but... I guess this is my way of learning 2 or 3 things simultaneously. – babyshark Mar 27 '14 at 20:38
  • no problem. I definitely recommend using different delimiters to ensure there is no confusion later on specially few months down the road when you are trying to debug the code – codegeek Mar 27 '14 at 20:40
  • Erm, there's nothing wrong with mixing server- and client-side templates. Jinja2 simply outputs an HTML file that Angular then passes over. In fact it's terribly useful for everything from extremely simple cache-busting to Jinja2 macros to...lots of stuff. – std''OrgnlDave May 09 '17 at 01:35