Conflict with curly brace in Angular variable

Question

I have the following data which I receive from the server

{
    name: "Sam {{{{aaa}}}}"
}

In angular I use the following to print it out

<span>{{name}}</span>

The expected output is

<span>Sam {{{{aaa}}}}</span> <!-- I dont want the curly braces here to act as a variable -->

But it throws me an error. It seems like Angular is trying to interpolate the string name too. How can I tell Angular to treat it as an inert string rather than a variable?

I have also explored the option of using a custom Angular delimiter but it would be very hard for me to change it in the rest of the app and would lead to breaking changes.

The problem with using ng-non-bindable is that it outputs

<span>{{name}}</span> <!-- doesnt render this variable -->

But I want to render the variable name and stop at that. But angular tries to render the things inside name to. i.e It tries to render aaa but fails as it has 4 curly braces which is a Lexer Error.

This is one of the objects in the array I receive over which I ng-repeat.

568cb34d9fd2ad1c1ef85632: Object
_id: "568cb34d9fd2ad1c1ef85632"
headline: "Android developer"
liprofile: "https://www.linkedin.com/xyz"
name: "First_nam Last_name {{{{user_role}}}}"
profilePicture: "https://media.licdn.com/mpr/mprx/0_t35SR8YAjvg3cAQG-L12Pt7Ajq78cKbPZ3jigzsAgqi3t8NaBLgSziqAOX1pNA4"
__proto__: Object

Notice that the issue is caused by {{{{user_role}}}}

I use angular 1.3.5

And following is the error which I see in the log

Error: [$parse:syntax] http://errors.angularjs.org/1.3.5/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Buser_role&p4=%7Buser_role
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:6:416
    at fb.throwError (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:189:474)
    at fb.object (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:199:132)
    at fb.primary (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:189:87)
    at fb.unary (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:196:279)
    at fb.multiplicative (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:196:6)
    at fb.additive (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:195:385)
    at fb.relational (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:195:247)
    at fb.equality (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:195:107)
    at fb.logicalAND (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:194:487)
    at fb.logicalOR (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:194:361)
    at fb.ternary (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:194:116)

May be [this](http://stackoverflow.com/questions/16868024/how-do-i-escape-curly-braces-for-display-on-page-when-using-angularjs) can help. — Slava N., Mar 01 '16 at 09:25
You can use ng-non-bindable in output received from server and then it won't be bind. — Akash KC, Mar 01 '16 at 09:25
Do you have a working (or not working) example? It works for me: https://plnkr.co/edit/2xr5TIvJ1PLe46KKTDK3?p=preview — Davin Tryon, Mar 01 '16 at 09:25
@DavinTryon Your example seems to be working but it does not work in my project. — Anubhav, Mar 01 '16 at 09:46

score 0 · Answer 1 · answered Mar 01 '16 at 10:39

ngNonBindable

The ngNonBindable directive tells Angular not to compile or bind the contents of the current DOM element. This is useful if the element contains what appears to be Angular directives and bindings but which should be ignored by Angular. This could be the case if you have a site that displays snippets of code, for instance.

-- AngularJS ng-non-bindable Directive API Reference

Conflict with curly brace in Angular variable

1 Answers1

ngNonBindable