Angularjsディレクティブ：String to directiveとして渡されたhtmlがテンプレートにレンダリングされない

Question

image-multiselectというanglejsディレクティブを作成しました。これは次のように使用できます。

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

append属性には、文字列としてhtmlが割り当てられていることに注意してください。私は

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

}()); 

問題を次のようにDDOにtemplate属性を変更するために使用することを期待このHTML文字列：APPENDに渡されたHTML文字列は、全体ではなく、マークアップは、それがページ上にあるように表示されるHTMLとしてレンダリングされていませんか？

Answer 1

@アンダーあなたの応答に感謝、それは私に正しい方向を与えました。私はAnderのアプローチ@使用ではなくng-bind-htmlを使用して、私はフランシス・ブーヴィエ（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); 


}()); 

Answer 2

未知のHTMLを危険にさらす可能性があるため、角度はHTMLをレンダリングしません。あなたはHTMLを使用ngSanitize
をレンダリングしたい場合は$のサニタイズサービスを使用する場合は次に

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

を使用しています。 ng-bind-htmlのデータは、デフォルトでレンダリングされます。

私はあなたのexsampleにplunkerを作りました：https://plnkr.co/edit/Vi46BsuAsnuk3N3R4Yz9?p=preview

変更はappend varibaleはNG-バインドHTML、sanitaizeがsciriptタグにダウンロードされてバインドされ、モジュール内に注入されていることです。