директива с inline tpl, содержащая ng-include

Question

У меня есть директива с встроенным шаблоном, содержащим элемент директивы ng-include.

Когда карма тестирует мою директиву и регистрирует результат скомпилированного элемента. tesult содержит комментарий ng, в котором ng-include не определено. Что я делаю неправильно? Директива работает нормально, но тестирование кармы кажется неработоспособным.

Answer 1

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

Мне нужно сделать несколько предположений и расширить этот вопрос, чтобы уточнить сценарий для будущих читателей.

Успение 1: ваша директива работает при нормальном использовании вне испытаний.

Успение 2: корневой элемент вашего шаблона директивы - это номер ng-include. В основном, это выглядит следующим образом:

module('myapp').directive('myDirective', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<ng-include src="myRealTemplateUrl" ></div>', 
    } 
}); 

Предположение 3: При создании и запуске юнит-тест жасмин, подобный этому, результат elem.html() не определен:

it('Renders something cool">', function(){ 
    var elem = $compile('<my-directive></my-directive>')($scope); 
    $scope.$digest(); 

    console.log('ELEM', elem.html()); 

    expect(elem.html()).toContain("foo); 
}); 

С, что из теперь, на этот вопрос можно ответить.

ng-include использует элемент переход. Когда корневой узел фрагмента HTML, переданный в $compile, использует переключение элементов, Angular превращает этот корневой узел в узел комментария. Затем Angular добавляет визуализированную версию вашей директивы в качестве узла-брата прямо под этим исходным корневым узлом. Итак, elem теперь узел комментариев, и поэтому elem.html() - undefined.

Более подробные объяснения можно увидеть в this tutorial или here

Решение простое, хотя, просто обернуть все, что вы прошли в $compile внутри другого корневого элемента. Так что не делать этого:

// don't do this 
var elem = $compile('<my-directive></my-directive>')($scope); 

сделать это:

// but do this 
var elem = $compile('<div><my-directive></my-directive></div>')($scope); 

Это все, что вам нужно сделать, чтобы на высшем уровне ng-include работу в модульном тесте.