AngularJS yönergesini dinamik içerikten sınıf adını alabilir mi? cls sınıfı ile

Question

http://jsfiddle.net/xKU5R/

Yukarıdaki durumda, ben bekliyorum elementler (ng-bağlama-html-güvensiz) ng tekrar içinde aynı davranışı ile aldı ve açıkça bir tane ayarlanabilir.

<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!'); 
      }); 
     } 
    } 
}); 

Burada neyin yanlış yaptığımı merak ediyorum.

Answer 1

Sorun, yeni HTML'nin Açısal olarak derlenmemesidir. En basit çözüm, $compile hizmetini kullanarak dinamik içeriği manuel olarak derlemek olabilir. Bunu özel bir yönergede yapın ve ng-bind-html-unsafe="r.alink"'u htmlinsert="r.alink" gibi bir şeyle değiştirin. İşte bu yönerge kodlanabilir nasıl:

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 dizesine referans bağlanma kapsamı izole kullanılarak geçirilir, ve daha sonra tekrar DOM öğesinin, mevcut yineleme eklenmiş önce derlenmiştir.

Demo: