html - 在 HTML 中使用 angular.jstemplate 转义花括号环境

Question

<pre>当与 angular.js 的通过花括号进行数据绑定的方法结合使用时，我发现 HTML 中的标记有一个奇怪的行为。给定数据绑定foo = 'bar'，我想写

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

这样它打印

{bar}

环境内<pre>。

{ bar }用空格打印不好。（这最终用于生成 BibTeX。）我尝试过使用 html 实体{和}，以及<xmp>环境。

知道这里发生了什么吗？提前致谢。

Answer 1

您可以尝试引用括号：

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

演示：http ://plnkr.co/edit/4LG6jfAAzzcw4tQuoTSw?p=preview

您也可以尝试创建一个函数：

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

{{ q(foo) }}

Answer 2

我在我的一个 Angular 页面中遇到了同样的问题，即使使用 Angular 自己的错误消息中的建议也无济于事。

起作用的只是用这样的替换打开的花括号{：

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

现在<pre>完美地显示了：

（顺便说一句，这是您可以用来轻松地<div>在浏览器中间垂直和水平居中 a 的 CSS ！）