AngularJS异步指令编译

我正在编写一个angularjs应用程序(带有节点/快速后端(。在我的范围内，我有一个通过服务异步填充(和重新填充(的对象。

的内容是一系列"问题"对象，为简单起见，它们具有"文本"和"类型"属性。

我试图实现的是能够为每个类型提供一个角度指令，并使其正确呈现。例如，如果服务器返回 [{type：'booleanquestion'，text：'the sky is blue？'}]我会创建一个元素，然后布尔问题指令将启动并适当地呈现它。

到目前为止，我已经定义了一个运行良好的"问题集"指令，观察问题收集并编译所需的内容，以便指令显示 correclt.y

目录

<div questionset="questions"/>

应用.js

...
scope.questions = questions; // e.g. [{text: 'some text',type: 'boolean'}]

指令.js

angular.module('myApp').directive('questionset',function($compile){
    return {
        transclude: 'true',
        compile: function(element,attr,linker){
            return function($scope,$element,$attr){
                var elements = [],
                    parent = $element.parent();
                $scope.$watchCollection('questions',function(questions){
                    var block, i, childScope;
                    if(elements.length > 0)
                    {
                        for( i = 0; i < elements.length ; i++)
                        {
                            elements[i].el.remove();
                            elements[i].scope.$destroy();
                        }
                        elements = [];
                    }
                    if(!questions) return;
                    for(i = 0; i < questions.length; i++)
                    {
                        childScope = $scope.$new();
                        childScope['question'] = questions[i];
                        var html = '<div class="'+questions[i].type+'"/>';
                        var e = angular.element(html);
                        block = {};
                        block.el = e;
                        block.scope = childScope;
                        $compile(e)(childScope);
                        element.append(e);
                        elements.push(block);
                    }
                });
            }
        }
    }
});
// For example, one type might be "boolean"
angular.module('myApp').directive('boolean',function($compile){
    return {
        restrict: 'AC',
        template: '<div class="question">{{question.text}}</div>',
        replace: true,
        link: function(scope,elem,attrs,ctrl){
            …….
       // for some reason, $compile will not be defined here?
        }
    };
});

虽然这工作正常，但我有 2 个问题

1(. 这是"正确"的角度方法吗？这是我的第一个角度项目，似乎我已经跳进了深渊(或者无论如何就是这样感觉(

2(. 我的下一个目标是让 question.text 能够包含 HTML 并对其进行"编译"。例如，文本可能是

"Is the <strong>sky</strong> blue?"

我不确定如何使这项工作 - 正如我在代码中的注释所暗示的那样，由于某种原因，$compile没有注入到我的布尔指令中。也许这是因为我已经手动为其创建了该子范围？我试图再次$compile元素的内容是对的吗？我觉得最后一点可能很简单，但我没有看到它。