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

}());

问题:append 中传递的 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屋！