CODEWITHSUNDEEP
angularjsangularjs-directive
RaghaveShukla
RaghaveShukla

Reputation: 289

Angularjs Directive : html passed as String to directive does not render in template

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>

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

}());

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

Upvotes: 0

Views: 1385

Answers (2)

RaghaveShukla
RaghaveShukla

Reputation: 289

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

Use Directive

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

Directive Definition

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


}());

Upvotes: 0

Anders Vestergaard
Anders Vestergaard

Reputation: 1149

Angular doesnt render HTML, because of the potential dangeros bahaviour of unknown HTML. If you want your HTML to be rendered use the ngSanitize
Then use 

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

When using the $sanitize service. Data in ng-bind-html will by default be rendered.

I've made a plunker to your exsample: https://plnkr.co/edit/Vi46BsuAsnuk3N3R4Yz9?p=preview

The changes are that the append varibale is binded with ng-bind-html, sanitaize is downloaded in sciript tag and injected in module.

Upvotes: 2

Related Questions