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

Question

當我使用ngTransclude ，頁面看起來不錯，但是出現控制台錯誤：

在模板中非法使用ngTransclude指令！ 找不到需要包含的父指令。 元素：{0}

我找到了根本原因：在index.js中，我使用$ compile編譯了模式指令，似乎$ compile無法與ng-transclude一起使用。 您是否有解決此問題的建議？

這是代碼

指令.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

請檢查“柱塞”鏈接。 它在那里工作。 如果您可以使用您的代碼更新鏈接，也許我們可以為您提供幫助。

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