angularjs:如何使用指令处理弹出窗口，以便数据来自控制器模型 [英] angularjs: how to handle a popup with a directive so that data comes from controller model

问题描述

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

模型的一部分如下:

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

正如你所看到的，一些 <li>包含允许打开弹出窗口的标签.

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

有什么想法吗?

解决方案

这里的问题是:ng-bind-html 只是简单地输出变量的内容.您需要的是一个组件，它$compiles 代码，以使附加指令起作用.

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

Javascript:

directives.directive("ngCompileHtml", function ($http, $compile){返回 {限制:A"，范围: {"ngCompileHtml": "="},链接:函数(作用域，元素){var 模板 = angular.element(scope.ngCompileHtml);$compile(template.contents())(scope);$(element).append(template);}};});

Suppose I have this tag in a template URL, into which HTML coming from the model is injected (HTML is basically <li> bullet points):

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

A portion of the model is as follows:

"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>",

And as you can see, some <li> contains tags that enables for opening a popup.

The issue I have, is that the span is cut off from his attributes, once injected in the partial.

Any idea?

解决方案

The problem here is: the ng-bind-html does simply output the content of the variable. What you need here is a component, that $compiles the code, to make additional directives work.

<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);
        }
    };
});

这篇关于angularjs:如何使用指令处理弹出窗口，以便数据来自控制器模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！