htmlangularjsprebibtextemplating-engine

Escaping curly braces with angular.jstemplating in HTML <pre> environment


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 &#123; and &#125;, as well as the <xmp> environment.

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


Solution

  • 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) }}