javascript - 带有 html 的 Angular 弹出窗口

Question

正确的使用方法是popver-html指示？ 我想通过 HTML 显示图像 img标记到我的弹出窗口 Angular-Bootstrap 中。 我创建了一个范围变量 $scope.html = "<img src=\""+$scope.mysrc+"\"></img>"我已将其放入我的指令中

<span popover-html="{{html}}" popover-title="......." popover-trigger="mouseenter"><a href="#">{{title}}</a></span>

但我有这个错误:

Uncaught Error: [$parse:syntax] ERROR popover-html

有什么建议吗？

Answer 1

这是一个plunk指导您如何将图像放入弹出窗口中。寻找“Dynamic Popover”按钮 首先，您需要sanitize你的HTML您在JS中写的.

所以，你的 JS 是这样的:

$scope.html = $sce.trustAsHtml("<img src=\""+$scope.mysrc+"\"></img>");

这将确保您的 HTML 可以安全地解析为 HTML。不要忘记注入(inject)ngSanitize在您的应用程序中作为依赖项。

现在，在您看来，而不是使用 popover-html="{{html}}" ，您需要使用popover-html="html" 。请注意，您正在向此弹出窗口传递一个表达式。