Kann die AngularJS-Anweisung den Klassennamen von dynamischem Inhalt übernehmen?

Question

http://jsfiddle.net/xKU5R/

In obigem Fall erwarte ich Elemente mit cls Klasse mit dem gleichen Verhalten abgeholt werden innerhalb ng-repeat (ng-bind-html-unsicher) und stellten ausdrücklich ein.

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

Ich frage mich, was mache ich hier falsch?

Answer 1

Das Problem ist, dass das neue HTML nicht von Angular kompiliert wird. Die einfachste Lösung besteht darin, den dynamischen Inhalt manuell mit dem Dienst $compile zu kompilieren. Tun Sie dies in einer benutzerdefinierten Anweisung und ersetzen Sie ng-bind-html-unsafe="r.alink" durch etwas wie htmlinsert="r.alink". Hier ist, wie die Richtlinie codiert werden:

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

Der Verweis auf die HTML-Zeichenkette übergeben wird unter Verwendung isolieren Umfang-Bindung und wird dann kompiliert, bevor auf die aktuelle Iteration des wiederholten DOM-Elements angehängt wird.

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