动态创建包含嵌入内容的指令时出错答案

【问题标题】：Error creating dynamically a directive that has transcluded content动态创建包含嵌入内容的指令时出错
【发布时间】：2019-02-10 16:14:06
【问题描述】：

在我的应用程序中，我动态地创建了一个指令，该指令具有我想要附加到容器 (div) 中的嵌入内容。我将这种方法用于我已经完成的几个组件并且效果很好。但是现在我有一个问题，因为这个指令已经嵌入了内容。我收到这样的错误：

angular.js:14199 错误：[$compile:ctreq] 控制器“compA”，指令“compB”需要，找不到！

任何帮助将不胜感激

这是创建组件并将其添加到容器的代码

var newScope = $rootScope.$new(true);
newScope.elementConfig = elementConfiguration;
newScope.componentApi = {};
containerElement.append($compile(elementToHost)(newScope));

这是我要添加到容器中的组件

<field
    type="{{type}}"
    model=""
    mdt="{{mdt_type}}"
    label="{{label}}"
    placeholder="{{placeholder}}"
    maxlength="{{maxlength}}"
    req="isMandatory"
    editable="editable"
    is-disabled="disabled">

<micro-help micro-help="{{'text.label' | translate }}"
                as-tooltip="true"
                position="right"
                micro-help-icon="fa-globe">
    <div>
        <micro-help-localization>
        </micro-help-localization>
    </div>
</micro-help>

</field>

【问题讨论】：

你能创建一个重现问题的 plunker 演示吗？此处显示的内容不足以解决该错误。见minimal reproducible example

标签： javascript angularjs angularjs-directive

【解决方案1】：

当 HTML 编译器尝试处理在指令定义中指定 require 选项的指令时，会发生此错误，但当前 DOM 元素（或其祖先元素，如果 ^ 是指定）。

要解决此错误，请确保所需的控制器名称中没有拼写错误，并且当前元素上存在所需的指令控制器。

欲了解更多信息，请参阅AngularJS Error Reference - $compile:ctreq Missing Required Controller

【讨论】：