与 Angular 变量中的花括号冲突答案

【问题标题】：Conflict with curly brace in Angular variable与 Angular 变量中的花括号冲突
【发布时间】：2016-03-01 09:14:19
【问题描述】：

我有以下从服务器收到的数据

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

在角度我使用以下打印出来

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

预期的输出是

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

但它给我一个错误。 Angular 似乎也在尝试插入字符串 name。如何告诉 Angular 将其视为惰性字符串而不是变量？

我还探索了使用自定义 Angular 分隔符的选项，但我很难在应用程序的其余部分更改它，并且会导致重大更改。

使用ng-non-bindable 的问题在于它的输出

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

但我想渲染变量name 并停止。但是 angular 试图将name 中的东西渲染到。即它尝试渲染aaa，但失败了，因为它有4个花括号，即Lexer Error。

这是我收到的数组中的对象之一，我通过它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

注意问题是由{{{{user_role}}}}引起的

我用angular 1.3.5

以下是我在日志中看到的错误

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)

【问题讨论】：

可能是this 可以帮忙。
您可以在从服务器接收到的输出中使用 ng-non-bindable，然后它就不会被绑定。
你有一个工作（或不工作）的例子吗？它对我有用：plnkr.co/edit/2xr5TIvJ1PLe46KKTDK3?p=preview
@SlavaN。我已经更新了这个问题。它没有帮助。
@DavinTryon 您的示例似乎有效，但在我的项目中不起作用。

标签： angularjs variables string-interpolation

【解决方案1】：

ngNonBindable

ngNonBindable 指令告诉 Angular 不要编译或绑定当前 DOM 元素的内容。如果元素包含看似 Angular 指令和绑定但应该被 Angular 忽略的内容，这将很有用。例如，如果您有一个显示 sn-ps 代码的网站，就会出现这种情况。

-- AngularJS ng-non-bindable Directive API Reference

【讨论】：