0

I'm using Handlebars to do client side preprocessing of dynamic templates for an Angular app. I require the Handlebars process to render some Angular mark up that contains {{ this notation }} that is for the angular templating engine as opposed to the Handlebars templating engine. 

{{This is a Handlebars expression that contains an {{Angular expression}}...}}

Is there a syntax for differentiating between Handlebars and Angular's double curly brace notation here? I don't want to change the syntax for Angular as I have a large amount of code dependent on that syntax. Can I adapt the Handlebars syntax?

hally9k
  • 2,423
  • 2
  • 25
  • 47
  • 1
    possible duplicate of [Using Express Handlebars and Angular JS](http://stackoverflow.com/questions/25366412/using-express-handlebars-and-angular-js) – G-Man Jul 24 '15 at 03:06
  • This question is not a dupe in my opinion. The question you posted as a dupe only covers changing the angular syntax. My application has mountains of existing angular code dependant on the standard template syntax. I am looking for the way to escape the angular expression syntax in handlebars processes or change the handlebars syntax. – hally9k Jul 24 '15 at 07:56

2 Answers2

5

The syntax in Igor Raush's answer is specific to Moustache. Handlebars doesn't support this functionality.

Handlebars does allow you to escape a single line with and backslash before the curly braces. But you wont find this in their documentation for some reason.

This doesn't address the edge case of nested expressions in the question but is the closest I could get to solving the issue and might prove useful to people facing a similar problem.

Here is an example:

<div>{{thisWillBeProcessedByHandlebars}}</div>

<div>\{{ThisWontBeProcessedByHandlebars}}</div>

hally9k
  • 2,423
  • 2
  • 25
  • 47
  • Here's the [Handlebars documentation for escaping](http://handlebarsjs.com/expressions.html#escaping) ;) – Tilt Jul 29 '16 at 09:55
2

You can change either Handlebars or Angular template delimiters:

Angular

First (global setting)

app.config(['$interpolateProvider', function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
}]);

then

<% This is an AngularJS expression that contains a {{ Handlebars expression }} %>

Handlebars

{{=<% %>=}}  // this kind of thing can be done as many times as needed
{{ This is an AngularJS expression that contains a <% Handlebars expression %> }}
Igor Raush
  • 15,080
  • 1
  • 34
  • 55
  • Is that really the syntax for changing the handlebars syntax? Is this change scoped for the rest of the file or globally? – hally9k Jul 24 '15 at 07:59
  • This doesn't seem to work after eventually trying it out. Could you explain exactly how you got this working? I cant find any docs or posts anywhere that suggest that this works out the box with standard handle bars. – hally9k Aug 03 '15 at 23:47