创建一个操作 DOM 的指令以添加依赖于范围的子指令

Question

我正在尝试在 Angular 中创建一个数据驱动的调查问卷。调查问卷可以支持多种类型的问题，这些问题应根据其类型进行不同的显示。目前，我使用像这样的一系列 ngIfs 来实现这一点：

<div ng-if="question.type === 'SingleAnswerQuestion'">
  <pn-single-answer-question model="question"></pn-single-answer-question>
</div>
<div ng-if="question.type === 'MultipleAnswerQuestion'">
  <pn-multiple-answer-question model="question"></pn-multiple-answer-question>
</div>
<div ng-if="question.type === 'IncrementalSingleAnswerQuestion'">
  <pn-single-answer-incremental-question model="question"></pn-single-answer-incremental-question>
</div>

我觉得这有点笨拙，特别是因为我们将在不久的将来添加更多的问题类型。所以我正在尝试将其封装在一个指令中，希望它会更圆滑而不是试图在模板中实现它。这是我想出的：

angular.module('membercenter.riskquestionnaire')
.directive('pnDynamicQuestion', function ($compile) {
  return {
    restrict: 'E',
    scope: {
      question: "=model"
    },
    link: function(scope, element, attrs) {
      var question = scope.question;
      var questionHtml = null;
      if (question.type === 'SingleAnswerQuestion') {
        questionHtml = '<pn-single-answer-question model="question"></pn-single-answer-question>';
      } else if (question.type === 'MultipleAnswerQuestion') {
        questionHtml = '<pn-multiple-answer-question model="question"></pn-multiple-answer-question>';
      } else if (question.type === 'NumericSingleAnswerQuestion') {
        questionHtml = '<pn-single-answer-incremental-question model="question"></pn-single-answer-incremental-question>';
      }

      if (questionHtml) {
        var questionElement = angular.element(questionHtml);
        var compiled = $compile(questionHtml);
        element.append(questionElement);
        compiled(scope);
      }
    }
  };
});

这似乎有效，因为它正确地为所需的特定问题类型添加了适当的 HTML。但是，具体的问题类型指令似乎并没有实际编译，因此浏览器中没有显示任何内容。有什么建议吗？

Answer 1

如果您正在寻找数据驱动的表单，请查看表单：http://formly-js.github.io/angular-formly/#/

该项目的维护者谈到解决此视频中的类似问题：https://www.youtube.com/watch?v=o90TMDL3OYc

Answer 2

感谢@charlietfl 指出我的错误。我已将代码的最后一部分更正如下：

if (questionHtml) {
  var link = $compile(questionHtml);
  var compiled = link(scope);
  element.append(compiled);
}

创建一个操作 DOM 的指令以添加依赖于范围的子指令

Creating a directive that manipulates DOM to add child directives dependent on scope

javascript

angularjs

angularjs-directive