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

Question

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

在模板中非法使用 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) {

        }]
    }
});

template.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);

Answer 1

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

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