AngularJSディレクティブは動的コンテンツからクラス名を取得できますか？ CLSクラスと

Question

http://jsfiddle.net/xKU5R/

上記の場合、私は期待してい要素は、（NG-バインド-HTML-安全ではない）ngのリピート内から同じ行動を拾い、明示的に設定します。

<div ng-app="appp"> 
    <div ng-controller="Ctrl"> 
    <ul> 
     <li ng-repeat="r in data" ng-bind-html-unsafe="r.alink"></li> 
    </ul> 
    <div class="cls">External</div> 
    </div> 
</div> 

function Ctrl($scope) { 
    $scope.data = [ 
     {alink: '<span><a class="cls">One</a></span>'}, 
     {alink: '<span><a class="cls">Two</a></span>'} 
    ]; 
} 

angular.module('appp', []) 
.directive('cls', function() { 
    return { 
     restrict: 'C', 
     replace: true, 
     scope: true, 
     link: function(scope, element, attrs) { 
      element.bind('click', function() { 
       alert('Aha!'); 
      }); 
     } 
    } 
}); 

私はここで何が間違っているのでしょうか？

Answer 1

問題は、新しいHTMLがAngularによってコンパイルされていないことです。最も簡単な解決策は、$compileサービスを使用して動的コンテンツを手動でコンパイルすることです。これをカスタムディレクティブで行い、ng-bind-html-unsafe="r.alink"をhtmlinsert="r.alink"のように置き換えてください。ここでその命令を符号化することができる方法である：

angular.module('appp', []) 
.directive('htmlinsert',function($compile){ 
    return { 
     scope: { 
      htmlinsert: '='  
     }, 
     link: function(scope,element,attrs){ 
      var compiledElement = $compile(scope.htmlinsert)(scope); 
      element.append(compiledElement); 
     } 
    } 
}); 

HTML文字列への参照は、単離スコープバインディングを使用して渡され、繰り返さDOMエレメントの現在の反復に付加される前にコンパイルされます。

デモ：http://jsfiddle.net/sh0ber/CLEqc/