Javascript 创建操纵DOM的指令，以添加依赖于作用域的子指令

我试图用Angular创建一个数据驱动的问卷。问卷可以支持多种类型的问题，这些问题应根据其类型进行不同的显示。目前，我使用一系列NGIF实现这一点，如下所示：

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

angular.module（'membercenter.risk问卷'）
.directive（'pnDynamicQuestion'，函数（$compile）{
返回{
限制：'E'，
范围：{
问题：“=模型”
},
链接：函数（范围、元素、属性）{
var问题=范围问题；
var=null；
如果（question.type=='SingleAnswerQuestion'）{
问题HTML=''；
}else if（question.type=='MultipleAnswerQuestion'）{
问题HTML=''；
}else if（question.type=='NumericSingleAnswerQuestion'）{
问题HTML=''；
}
如果（HTML）{
var questionElement=angular.element（questionHtml）；
var compiled=$compile（问题HTML）；
元素。追加（元素）；
编制（范围）；
}
}
};
});

---

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

如果您正在寻找数据驱动的表单，请查看表单：

---

该项目的维护人员在本视频中谈到了解决类似问题的方法：

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

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

---

添加已编译的html，而不是原始模板您完全正确-谢谢！