7

http://jsfiddle.net/xKU5R/

上記の場合、 class を持つ要素が( )cls内から同じ動作で取得され、明示的に設定されることを期待しています。ng-repeatng-bind-html-unsafe

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

私はここで何が間違っているのだろうか？

4

1 に答える 1

5

問題は、新しい HTML が Angular によってコンパイルされていないことです。$compile最も簡単な解決策は、サービスを使用して動的コンテンツを手動でコンパイルすることです。カスタム ディレクティブでこれを行い、 のng-bind-html-unsafe="r.alink"ようなものに置き換えhtmlinsert="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 文字列への参照は、isolate スコープ バインディングを使用して渡され、繰り返される DOM 要素の現在の反復に追加される前にコンパイルされます。

デモ: http://jsfiddle.net/sh0ber/CLEqc/

于 2013-06-05T06:34:16.707 に答える