angularjs - angularjs：如何使用指令处理弹出窗口，以便数据来自控制器模型

Question

假设我在模板 URL 中有这个标签，来自模型的 HTML 被注入到该标签中（HTML 基本上是 <li> 要点）：

<div ng-bind-html="accident.description.impact"></div>

模型的一部分如下：

"cause": 

"<ul>\n\
    <li>\n\
    <div><span inline-popover \n\
        popover-html=\"Taper pour ouvrir la vue détaillée\" \n\
        popover-placement=\"bottom\" \n\
        popover-label=\"Larve de taupin\">Larve de taupin</span></div>\n\
    </li>\n\
    <li>Semences en cours de germination</li>\n\
</ul>",

正如你所看到的，一些 <li> 包含可以打开弹出窗口的标签。

我遇到的问题是跨度从他的属性中被切断，一旦注入部分。

任何想法？

Answer 1

这里的问题是：ng-bind-html确实只是输出变量的内容。您需要的是一个组件，即$compiles代码，以使其他指令起作用。

<div ng-compile-html="accident.description.impact"></div>

Javascript：

directives.directive("ngCompileHtml", function ($http, $compile)
{
    return {
        restrict: "A",
        scope: {
                "ngCompileHtml": "="            
        },
        link: function (scope, element)
        {
            var template = angular.element(scope.ngCompileHtml);
            $compile(template.contents())(scope);
            $(element).append(template);
        }
    };
});