Czy dyrektywa AngularJS może pobrać nazwę klasy z dynamicznej zawartości?

Question

http://jsfiddle.net/xKU5R/

W powyższym przypadku, m oczekiwano elementy z klasy CLS być odebrany z tego samego postępowania z wnętrza ng powtarzania (ng-bind-HTML niebezpiecznych) i wyraźnie ustawione.

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

Zastanawiam się, co tu robię źle?

Answer 1

Problem polega na tym, że nowy kod HTML nie jest kompilowany przez Angular. Najprostszym rozwiązaniem może być ręczne kompilowanie zawartości dynamicznej za pomocą usługi $compile. Zrób to w dyrektywie niestandardowej i zastąp ng-bind-html-unsafe="r.alink" czymś podobnym do htmlinsert="r.alink". Oto w jaki sposób, że dyrektywa może być kodowane:

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

Odniesienie do napisu HTML jest przekazywana za pomocą izolować wiążącego zakresu, a następnie jest kompilowany przed dołączana do bieżącej iteracji powtarzającego się elementu DOM.

Demo: http://jsfiddle.net/sh0ber/CLEqc/