在另一个指令中编译指令

Question

我有一个可以输出纯HTML或其他指令的指令。我在编写内部指令时遇到了麻烦，现在Angular只是将实际的指令标记粘贴到我的html而不编译它。

以下是Chrome Inspector的屏幕截图，其中显示了未编译的指令

基本上，我使用的是允许HTML的$sce.trustAsHtml("<html-string-here>")，但它不会编译指令。

如果我将其包裹在$compile($sce.trustAsHtml("<html-string-here>"))($scope)中，则会抛出错误。 我在这里缺少什么？

---

在此完整演示：http://jsfiddle.net/ChrisMBarr/nozauLzo/3/

简化的演示说明如下

---

我有这个清单

$scope.list = [{
    id:1,
    content: "some plain text"
},{
    id:2,
    content: "<strong>some HTML!</strong>"
},{
    id:3,
    content: "<inner-directive text='A Directive!'></inner-directive>"
}];

我像这样绑定到该列表：

<outer-directive ng-repeat="item in list" data="item"></outer-directive>

该指令就像这样构建

myTestApp.directive("outerDirective",["$sce", "$compile", function($sce, $compile){

    function getLink($scope){
        var trustedHtml = $sce.trustAsHtml($scope.data.content);
        $scope.trustedContent = trustedHtml;
        //This will break it!
        //var compiledHtml = $compile(trustedHtml)($scope);
        //$scope.trustedContent = compiledHtml ;
        //console.log(trustedHtml, compiledHtml)
    }

     function getTemplate(){
         return ""+
             "<div class='outer'>"+
             "  #{{data.id}} -- "+
             "  <span ng-bind-html='trustedContent'></span>"+
             "</div>";
    }

    return {
        restrict: "E",
        replace: true,
        scope: {
            data: "="
        },
        link: getLink,
        template: getTemplate
    };
}]);