AngularJS指令可以從動態內容中獲取類名嗎？

Question

與CLS類

http://jsfiddle.net/xKU5R/

在上述情況下，我期待元件來從NG-重複（NG-結合 - HTML不安全的）內拾起用相同的行爲，並且明確地設置一個。

<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服務手動編譯動態內容。在定製指令中執行此操作，並用htmlinsert="r.alink"之類的東西替換ng-bind-html-unsafe="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/