Вложенные директивы, ребенок не «transclude» правильно

Question

Вот что я пытаюсь сделать: http://jsfiddle.net/Dtg3N/

'use strict'; 

var navbar = angular.module('navbarApp', []); 

navbar.directive('navbar', function() { 
return { 
    restrict: 'E', 
    transclude: true, 
    scope: {}, 
    template: '<div class="navbar"><div class="navbar-inner"><div class="nav-collapse collapse">'+ 
    '<ul class="nav" ng-transclude></ul>'+ 
    '</div></div></div>', 
}; 
}); 

navbar.directive('navItem', function ($compile) { 

var brandTpml  = '<li class="brand" ng-transclude></li>'; 
var dropdownTmpl = '<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ title }} <b class="caret"></b></a><ul class="dropdown-menu" ng-transclude></ul>'; 
var simpleTmpl  = '<li ng-transclude></li>'; 

var getTemplate = function(itemType) { 

    var template = ''; 

    switch (itemType) { 
    case 'brand': 
     template = brandTpml; 
     break; 
    case 'dropdown': 
     template = dropdownTmpl; 
     break; 
    default: 
     template = simpleTmpl; 
     break; 
    } 

    return template; 
}; 

var itemType; 
return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    link: function(scope, element, attrs) { 
     itemType = attrs.type; 
    }, 
    template: getTemplate(itemType) 
}; 
}); 

Короче говоря, я хотел бы гнездиться в директиве. Он почти работает, за исключением того, что вещь «transclude» не работает для вложенных элементов.

Как я могу получить эту работу?

Answer 1

Проблема заключается в следующей строке:

template: getTemplate(itemType) 

Параметр ItemType пока не известно, соответственно. он не определен. Функция ссылки называется позже. Вы должны динамически переключать шаблоны в функции ссылок и компилировать их с помощью $ compile(), например.

$compile(getTemplate(itemType))(scope) 

Тогда вы получите элемент, который может быть вставлен в DOM.