Angularjs 在 HTML 标签内绑定 HTML 标签答案

【问题标题】：Angularjs bind HTML tags inside a HTML tagAngularjs 在 HTML 标签内绑定 HTML 标签
【发布时间】：2015-08-24 03:11:03
【问题描述】：

考虑一下我的控制器文件中的以下代码，

$scope.update = "<div class='search'><input type="search" name="search" /></div>";

我想将这个$scope.update 绑定到另一个div 标记内。在angular.js可以做到吗？

【问题讨论】：

您的意思是类似于ng-bind-html 指令？ docs.angularjs.org/api/ng/directive/ngBindHtml
你需要这个做什么？可能有比插入 HTML 更好的方法。
我有一个文本框，可以自动完成我们搜索的地方，我得到了这个地方并计算了地图相关任务，并在控制器中生成了一个带有 html 标签的地图，当用户需要更新时更改他的位置/城市并在文本框中选择。
如果我理解正确，您正在尝试使用 AngularJS 构建自定义指令。或许这篇文章可以帮到你：ng-newsletter.com/posts/directives.html
请查看 plunker 链接以更好地了解我的问题 - plnkr.co/edit/CBXThWRHdnHwa5RZXD0C?p=info

【解决方案1】：

基本上，您需要使用 angular-sanatize 库。

在您的 html 中添加 angular-sanatize.js，并在您的模块中提供“ngSanitize”的依赖项

让我们说而不是

<div>{{update}}</div>

使用

<div ng-bind-html="update"></div>

【讨论】：

我已经尝试过了，我得到了以下结果。
"
"
。 div标签内部，div标签绑定了双引号，导致在浏览器中显示div标签，不渲染div标签。
如果您使用这种方法，您需要更改 HTML 以使用单引号作为属性，如下所示：$scope.update = "<div class='search'><input type='search' name='search' /></div>";
请查看 plunker 链接以更好地了解我的问题 - plnkr.co/edit/CBXThWRHdnHwa5RZXD0C?p=info
缺少什么 - 1) 创建模块时的“ngSanatize”依赖项。 2) 在 html 中 {{update}} 应该用
更新 3) 现在因为你的 html 中有样式，我们必须使用 $sce 服务来保留，否则它们会被 ng-bind-html 丢失。
另外，我会建议，如果你只想在它下面的输入框中绘制文本，你 ng-model，你甚至不必编写函数。你也可以通过在 html 中移动 div 来避免这个 ng-bind-html。