Escaping curly braces with angular.jstemplating in HTML
environment

Question

I've found a strange, weird behavior with the <pre> tag in HTML when used in conjunction with angular.js' method of data binding via curly braces. Given the data binding foo = 'bar', I want to write

<pre>
{{{foo}}}
</pre>

such that it prints

{bar}

within the <pre> environment.

It's no good to print { bar }, with the spaces. (This is ultimately used to generate BibTeX.) I've tried using the html entities { and }, as well as the <xmp> environment.

Any idea what's going on here? Thanks in advance.

score 1 · Accepted Answer · answered Jun 20 '14 at 23:31

1

You can try quoting the brackets:

{{ "{" + foo + "}" }}

Demo: http://plnkr.co/edit/4LG6jfAAzzcw4tQuoTSw?p=preview

You also might try making a function:

$scope.q = function(s) {
   return "{" + s + "}";
 }

{{ q(foo) }}

answered Jun 20 '14 at 23:31

lucuma

18,247
4
66
91

No problem don't forget to accept the answer if it helped you. I also added a note to the answer. – lucuma Jun 20 '14 at 23:35

score 0 · Answer 2 · answered Sep 20 '20 at 09:22

I had the same issue in one of my Angular pages, and even using the suggestion in Angular's own error message didn't help me.

What did work was simply to replace the opening curly bracket with { like this:

<pre>
.popup &#123;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}
</pre>

This now shows the <pre> perfectly:

(By the way, this is the CSS you can use to easily vertically and horizontally center a <div> in the middle of your browser !)

Escaping curly braces with angular.jstemplating in HTML environment

2 Answers2

Escaping curly braces with angular.jstemplating in HTML
environment