Angularjs指令：作为字符串传递给指令的html不会在模板中呈现答案

【问题标题】：Angularjs Directive : html passed as String to directive does not render in templateAngularjs指令：作为字符串传递给指令的html不会在模板中呈现
【发布时间】：2017-01-22 08:10:03
【问题描述】：

我创建了一个名为 image-multiselect 的 angularjs 指令，可以按如下方式使用。

   <image-multiselect items="landTransportTypes" image="illustrationURL" itemname="name" append="<div class='detail'>...some html here...</div>"></image-multiselect>

注意 append 属性，它被分配了一个 html 作为字符串。我希望使用这个 html 字符串来修改 DDO 中的 template 属性，如下所示

function(){

    var imageMultiselect = function(){

        return {

            scope : {
                        items: "=",
                        image: "@",
                        itemname: "@",
                        append: "@" 

                    },

            template : "<div style='background:#f2f2f2;padding:20px;margin:20px;border-radius:5px;min-height:100px;'>" +
                        "<div ng-repeat='item in items' class='card text-center'>" +
                            "<img class='card-img' src='{{item[image]}}' alt='Avatar'>" +
                            "<div class='detail'>" +

                                "<b>{{item[itemname]}}</b>" +

                                 /*append used to customize template as per requirement*/
                                 "{{append}}"+

                            "</div>" +
                         "</div>" +
                       "</div>"

        }


    }

    angular.module("myApp").directive("imageMultiselect",imageMultiselect); 

}());

问题：在追加中传递的 html 字符串没有呈现为 html，而是整个标记显示在页面上？

【问题讨论】：

使用 ng-bind-html，否则不评估

标签： angularjs angularjs-directive

【解决方案1】：

Angular 不渲染 HTML，因为未知 HTML 的潜在危险行为。如果您希望您的 HTML 被呈现，请使用 ngSanitize
然后使用

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

使用 $sanitize 服务时。 ng-bind-html 中的数据默认会被渲染。

我为您的示例做了一个 plunker：https://plnkr.co/edit/Vi46BsuAsnuk3N3R4Yz9?p=preview

变化是append变量与ng-bind-html绑定，sanitaize在sciript标签中下载并注入模块。

【讨论】：

谢谢，这正是我一直在寻找的，但现在唯一剩下的问题是我可以在给ng-bind-html的html标记中使用ng-model
不知道你要做什么，但如果是类似 Stackoverflow 的输入和预览，你可以使用：来自这篇文章的想法：stackoverflow.com/questions/20796102/… 我做了一个简单的 plunker 来说明：plnkr.co/edit/SXIIdIVbDlmAqMnjKITJ?p=preview
好吧，我想做的是创建一个多选图片库，它会使用 url 列表来显示图片和项目名称，但它也会有一个详细信息部分保持为空，但是当开发人员提供一些 html 时，详细信息部分将被该 html 替换。在我们的应用程序中，在某些情况下，详细信息部分需要替换为用于存储项目计数的输入字段。但我打算让它通用，以便任何人都可以使用它。我遇到的是，对于您的示例 ng-bind-html 只需要简单的 html，但它会删除输入字段。
是的 ng-bind-html 以“安全”的方式评估 html。他们删除了 privious ng-bind-html-unsafe，但我看到人们自己执行此指令。喜欢stackoverflow.com/questions/22808062/…。
你说得对，我找到了一个这样的实现，它可以让我完全按照我想要的方式实现。 github.com/francisbouvier/ng_html_compile

【解决方案2】：

@Anders 感谢您的回复，它给了我正确的方向。我使用了@Ander 的方法，但没有使用ng-bind-html，而是使用了Francis Bouvier 的ng-html-compile 指令（https://github.com/francisbouvier/ng_html_compile）

使用指令

<image-multiselect items="landTransportTypes" 
                                   image="illustrationURL" 
                                   itemname="name"
                                   append="<input type='text' name='count' placeholder='Count' ng-model="transport.count" class='form-control input-sm'/></div>">
                                   </image-multiselect>

指令定义

(function(){

    var imageMultiselect = function(){

        return {

            scope : {
                        items: "=",
                        image: "@",
                        itemname: "@",
                        append: "@" 

                    },

            template : "<div style='background:#f2f2f2;padding:20px;margin:20px;border-radius:5px;min-height:100px;'>" +
                        "<div ng-repeat='item in items' class='card text-center'>" +
                            "<img class='card-img' src='{{item[image]}}' alt='Avatar'>" +
                            "<div class='detail'>" +
                                "<b>{{item[itemname]}}</b>" + 
                                /* This is where i use ng-html-compile directive, which works wonders for me, refer : https://github.com/francisbouvier/ng_html_compile  */
                                     "<span ng-html-compile='append'></span>" +

                            "</div>" +
                         "</div>" +
                       "</div>"

        }


    }

    angular.module("myApp").directive("imageMultiselect",imageMultiselect);


}());

【讨论】：