javascript - AngularJS 异步指令编译

Question

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

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

我想要实现的是能够为每种类型提供一个 Angular Directive(指令)，并使它们能够正确呈现。因此，例如，如果服务器返回 [{type:'booleanquestion',text:'Is the sky blue?'}] 我会创建一个元素，然后 booleanquestion 指令将启动并适本地呈现它。

到目前为止，我已经定义了一个运行良好的“questionset”指令，观察问题集合并编译所需的东西，以便指令显示 correclt.y

HTML

<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).这是执行此操作的“正确” Angular 方法吗？这是我的第一个 Angular 项目，似乎我已经进入了更深层次(或者无论如何就是这种感觉)

2).我的下一个目标是让 question.text 能够包含 HTML 并将其“编译”。例如文本可能是

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

我不确定如何进行这项工作——正如我在代码中的评论所暗示的那样，出于某种原因，$compile 没有被注入(inject)到我的 bool 指令中。也许这是因为我已经为它手动创建了那个子作用域？我试图再次 $compile 元素的内容是对的吗？我觉得最后一点可能非常简单，但我没有看到。

Answer 1

1) 我不知道。在我看来，整体方法似乎非常好；只需对其进行润色，我们将在下面看到。

2) 可能 $compile 在嵌套函数中不可用，因为它没有在父级别使用。尝试在父函数中引用 $compile 以查看是否真的是这个原因:

angular.module('achiive-vision').directive('boolean',function($compile){
    var justTesting = $compile;
    return {
        restrict: 'AC',
        template: '<div class="question">{{question.text}}</div>',
        replace: true,
        link: function(scope,elem,attrs,ctrl){
            …….
       // check if $compile is defined here now
        }
    };
});

我会通过将 questionset 元素 html 更改为:

来简化事情:

var html = '<div class="question ' + questions[i].type + '">'
           + questions[i].text + '</div>';

这样就不用再编译了，就已经支持HTML了。

另外，有一点奇怪

var html = '<div class="'+questions[i].type+'"/>';

上面，然后你将用类似的标记替换它:

template: '<div class="question">{{question.text}}</div>',

...然后您想再次编译...

在我看来，您不需要 replace: true，也不需要问题类型指令中的 template。在它们上实现行为和任何其他内容，但让父 questionset 包含问题文本并编译它 - 为此一切都准备就绪。

还有一个细节:我不会在循环中使用 var html 和 var e。我会将它们添加到上面的列表中:

var block, i, childScope, html, e;

(另外，我会避免将变量命名为“i”和“e”...)

这些是我对您的代码的评论。正如我所说，我认为这种方法非常好，对于刚开始使用 AngularJS 的人来说不算“高级”。我自己用了不到两个月而已。