ng-repeat内でng-bind-htmlをコンパイル

Question

私は特別なテンプレートの問題があります...製品の配列を持っていて、すべての製品に "button_code"というプロパティがあり、このプロパティはプレーンテキストのHTML laravelテンプレート内部にいくつかの角度コードがあります。

実際には、ng-repeat-html = "product.button_code"をa内で使用し、このテンプレートをng-repeat内で使用すると、htmlコードは繰り返し繰り返しごとに正しく挿入されますが、コードはプレーンテキストです。

 var targets = $('.buy-button-container').toArray(); 
     for (var target in targets) { 
     console.log($(targets[target])); 
      $compile($(targets[target]))($scope); 
     } 
     $scope.$apply(); 

しかし、これは、容器内のコード（NGに挿入されたすべてのHTMLコードを作る：私は、このHTML内のNG-コントローラNG-クリックなどが

が、私はこれを試す「ウェイクアップ」する必要があります-bind-html）DOMの消滅。

どうすればいいですか？ PD：はい、イム特別な物事ので、これらのproduct.button_codeでこれらのテンプレートを使用するように強制...）

おかげ

EDIT：これは私がバインドするコードの一部です：

<button class="buy-link btn btn-default" data-toggle="modal" role="button" ng-controller="BuyController" ng-click="doProduct({'id':'8888','title':'testestest','price':13.99,'currency':'EUR''preorder_enabled':false,'crossedPrice':100,'stock':true,'short_desc':'bla bla bla.','lbonus':false,'bonus_txt':false})"> 

       <span class="left"> 
        <i class="fa fa-cart"></i> 
       <span itemprop="price">€13.99</span> 
       </span> 
       <span class="right"> 
        {{GETIT}}</span> 
       </button> 

あなたのコントローラに$のSCEを注入する必要があります

$sce.trustAsHtml('<b>Your html</b>'); 

：HTMLは次の機能を使用する必要がレンダリングさせるためには

Answer 1

は$compileサービスによって作成された関数の第2引数として提供transclude機能を使用します。

app.directive("compileBindExpn", function($compile) { 
    return function linkFn(scope, elem, attrs) { 
     scope.$watch("::"+attrs.compileBindExpn, function (html) { 
      var expnLinker = $compile(html); 
      expnLinker(scope, function transclude(clone) { 
       elem.empty(); 
       elem.append(clone); 
      }) 
     }); 
    }; 
}); 

上記のディレクティブは、AngularJS式としてcompile-bind-expn属性を評価します。次に、$compileサービスを使用して評価されたHTMLを要素にバインドします。既存のコンテンツはすべて削除されます。

使用方法：ディレクティブは、メモリリークを回避するために$watchに結合1回を使用していることを

<div class="buy-button-container" compile-bind-expn="buttonCode"> 
    <p>This Node disappears when expression binds</p> 
</div> 

注意。

DEMO on JSFiddle

Answer 2

。

ng-repeatでこれを行う場合は、コントローラでこれを行う関数が必要です。例：とにかく

テンプレートで

$scope.transformHTML = function(html) { 
    return $sce.trustAsHtml(html); 
} 

...

<div ng-repat="foo in bar"> 
    <div ng-bind-html="transformHTML(foo.html)"></div> 
</div> 

は、私はあなたのHTML内の "角度" の魔法がうまくいくとは思いません。