Displaying {{ }} curly braces in Angular.js applications

Displaying {{ }} curly braces in Angular.js applications

This will be a quick one!

I needed to display {{ }} curly braces as content in an angular application I was coding up as a demo. I wanted the braces to display next to the result of an angular expression that was being evaluated but I did not want angular to also treat the second pair of braces as an expression.

<div class="block">
  <div>
    Your name is <span>{{name}}</span>
    <div data-ng-non-bindable class="tip">Using angular expressions {{ }}</div>
  </div>

  <div>
    Your name is <span data-ng-bind="name"></span>
    <div class="tip">Using angular directive 'ng-bind'</div>
  </div>
</div>

You will notice on line 4 I use the ng-non-bindable directive. As you can see in the angular.js documentation

The ngNonBindable directive tells Angular not to compile or bind the contents of the current DOM element… This could be the case if you have a site that displays snippets of code, for instance.

Well, that is exactly what I needed.