Angularjs指令:作为字符串传递给指令的html不会在模板中呈现 [英] Angularjs Directive : html passed as String to directive does not render in template

问题描述

我创建了一个名为image-multiselect的angularjs指令，该指令可以如下使用.

I have created an angularjs directive called image-multiselect which can be used as follows.

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

请注意为append属性分配了html作为字符串.我希望这个html字符串用于修改DDO中的template属性，如下所示:

Notice the append attribute which is assigned an html as string. This html string i expect to use for modifying the template attribute in the DDO as follows

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，而是整个标记都显示在页面上吗?

Problem : The html string passed in the append is not rendered as html rather entire markup is displayed as it is on the page ?

推荐答案

@Anders感谢您的回复，它给了我正确的方向.我使用了@Ander的方法，但是没有使用ng-bind-html，而是使用了弗朗西斯·鲍维(Francis Bouvier)的ng-html-compile指令( https://github.com/francisbouvier/ng_html_compile )

@Anders thanks for your response, it gave me the right direction. I used @Ander's approach but instead of using ng-bind-html i used ng-html-compile directive by Francis Bouvier ( 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指令:作为字符串传递给指令的html不会在模板中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！