在模板中非法使用 ng-Transclude 指令答案

【问题标题】：Illegal use of ng-Transclude directive in the template在模板中非法使用 ng-Transclude 指令
【发布时间】：2018-01-09 10:42:32
【问题描述】：

当我使用ngTransclude时，页面看起来不错，但出现控制台错误：

在模板中非法使用 ngTransclude 指令！没有找到需要嵌入的父指令。元素：{0}

我找到了根本原因：在 index.js 中我使用 $compile 来编译模态指令。似乎 $compile 不能与 ng-transclude 一起使用。您有解决此问题的建议吗？

这里是代码

directive.js：

myApp.directive('modal', function () {
    return {
        restrict: 'E',
        templateUrl: 'modal/modal.html',
        replace: true,
        transclude: true,
        scope: {},
        link: function(scope, element, attrs){

        },
        controller: ['$scope', function transcludeController($scope) {

        }]
    }
});

模板.html：

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"> ... </div>
            <div class="modal-body">
                <ng-transclude></ng-transclude>
            </div>
            <div class="modal-footer"> ... </div>
        </div>
    </div>
</div>

index.html:

<modal>
<input type="text" id="test"/>
</modal>

index.js：

$scope.test = 'test';
$("#test").attr("ng-model", "test");
$compile(modal)($scope);

【问题讨论】：

标签： javascript angularjs compiler-construction angular-directive angularjs-ng-transclude

【解决方案1】：

请检查 Plunker 链接。它在那里工作。如果您可以使用您的代码更新链接，也许我们可以帮助您。

Link: https://plnkr.co/edit/ey1fXDwEOVtA64R6Io3q?p=preview

【讨论】：