Незаконное использование директивы ng-Transclude в шаблоне

Question

Когда я использую 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) {

        }]
    }
});

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