Question

我遇到了这些问题，希望你能指出我正确的方向。

这是fiddle。

解释器

1）我通过ajax请求收到一些模板html，一切正常，这就是它的样子：

        <div>
            <h2 class="splash" ng-bind="view.headline || 'That&#039;s cool'"></h2>
        </div>

正如您已经知道 view.headline 这将输出那很酷

2）将模板添加到dom（只是伪代码）

<div id="thisIsMyTemplatePlaceholder"></div>
<script>
var templateFromAjax="<h2 ng-bind=\"view.headline||'That&#039;s cool'\"></h2>";
$("#thisIsMyTemplatePlaceholder").html(templateFromAjax);
</script>

3）检查添加的HTML，你会在ng-bind属性上看到三个'（撇号），这会导致我的错误

<div id="thisIsMyTemplatePlaceholder">
<h2 ng-bind="view.headline||'That's cool'"></h2>
</div>

4）问题似乎是jQuery.html（）函数，因为它解码了特殊字符。

jquery is transforming this: 'That&#039;s cool' into 'That's'

Answer 1

另一种方式：

首先，将模板分离到另一个文件，这样更简单：

<强> myTemplate.html

<h2 ng-bind="view.headline || 'That\'s cool'"></h2> 
<!-- you can just escape the one apostraphe, but really, 
this logic doesn't belong in the html, but rather the 
controller or service which assigns a value to view.headline -->

然后您可以添加模板：

<div id="thisIsMyTemplatePlaceholder" ng-include="'myTemplate.html'"> </div>

显示此工作的Plunker：

http://plnkr.co/edit/NlzTmlNMQCqHwqVxgCpQ?p=preview

Answer 2

尝试逃避两次。当html()取消您的字符串时，将删除一个转义符，请参阅here以供参考。

'That\\'s cool'\">That's cool</h2>";

现在，当您使用.attr("ng-bind")时，结果将是

view.headline || 'That\'s cool

这是您想要的效果，还是仅That's cool有效？

Answer 3

你试过了吗？

<!-- you can just escape the one apostrophe -->
<h2 ng-bind="view.headline || 'That\'s cool'"></h2>

如何使用jquery添加包含AngularJS表达式的ajax加载内容

3 个答案: