Скомпилировать динамический шаблон с помощью ng-include

Question

Я застрял в следующем случае. У меня есть динамический шаблон (template.html) с ng-include.

<div data-ng-include data-src="childTemplate">{{ var }}</div>

если я попытаюсь сделать:

$scope.childTemplate = 'child.html';
tpl = $compile($templateCache.get('template.html'))($scope);

в этом случае tpl содержит только скомпилированный родительский шаблон без дочернего шаблона. Я пытался сделать

<div data-ng-include data-src="childTemplate" onload="templateLoaded()"></div>

а также

tpl = $compile($templateCache.get('template.html'))($scope);
$scope.contentLoaded = function() {
    $compile($templateCache.get('child.html'))($scope)
}

в этом случае child.html загружен, но не включен в родительский шаблон. Как решить задачу? Спасибо!

Answer 1

tpl теперь элемент скомпилирован в вашей DOM. Что вы должны сделать, это после child.html компилируется, чтобы добавить его в вашу DOM.

Таким образом, вы можете сделать следующее:

tpl = $compile($templateCache.get('template.html'))($scope);
$scope.contentLoaded = function() {
    var child = $compile($templateCache.get('child.html'))($scope);
    tpl.appendChild(child);
}

Это может сработать, если вы хотите добавить child.html шаблон как последний из tpl дети (если нет, вы должны ориентироваться).