La direttiva AngularJS può rilevare il nome della classe dal contenuto dinamico?

Question

elementi

http://jsfiddle.net/xKU5R/

Nel caso di cui sopra, mi aspetto con classe CLS essere raccolti con lo stesso comportamento dall'interno ng-repeat (ng-bind-html-non sicuro), e impostare in modo esplicito uno.

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

Mi chiedo cosa faccio di sbagliato qui?

Answer 1

Il problema è che il nuovo codice HTML non viene compilato da Angular. La soluzione più semplice potrebbe essere quella di compilare manualmente il contenuto dinamico utilizzando il servizio $compile. Fai questo in una direttiva personalizzata e sostituisci ng-bind-html-unsafe="r.alink" con qualcosa come htmlinsert="r.alink". Ecco come tale direttiva potrebbe essere codificato:

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

viene passato Il riferimento alla stringa html utilizzando isolare vincolante portata, e viene quindi compilato prima di essere aggiunto alla iterazione corrente dell'elemento DOM ripetuto.

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