Question

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

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

注意将html指定为字符串的append属性。我希望这个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，而是显示整个标记，因为它在页面上显示？

Answer 1

Angular不会呈现HTML，因为未知HTML的潜在dangeros bahaviour。如果您希望呈现HTML，请使用ngSanitize
然后使用

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

使用$ sanitize服务时。默认情况下，将呈现ng-bind-html中的数据。

我已经为你的例子做了一个问题：https://plnkr.co/edit/Vi46BsuAsnuk3N3R4Yz9?p=preview

更改是append varibale与ng-bind-html绑定，sanitaize以sciript标记下载并注入模块。

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


}());

Angularjs指令：作为String传递给指令的html不会在模板中呈现

2 个答案: