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

Posted 2023-03-05

【中文标题】如何使用 jquery 添加包含 AngularJS 表达式的 ajax 加载内容

【英文标题】：How to add ajax loaded content that contains an AngularJS expression with jquery

【发布时间】：2016-03-27 17:01:39

【问题描述】：

我被这些问题困住了，希望你能指出我正确的方向。

这里是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's cool' into 'That's'

【问题讨论】：

您不应该将 jQuery 与 Angular 混合使用，如果您有一个模板要粘贴到页面中，您应该使用指令。因此，要解决您的问题，请使用 ng-include 粘贴您的模板。

您能否详细说明您对模板的调用是什么样的？ URL 结构是什么？

【参考方案1】：

你试过了吗：

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

【参考方案2】：

另一种方式：

首先，将模板分离到另一个文件中，这样更容易：

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

【讨论】：

这行得通，但我仍在寻找一种方法来使用 jquery 做到这一点。感谢plankr！

【参考方案3】：

尝试转义两次。 一个转义将被删除，因为html() 取消了您的字符串，请参阅here 以供参考。

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

现在当你使用.attr("ng-bind") 时，结果如下

view.headline || 'That\'s cool

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