javascript - 嵌套指令，孩子没有正确“嵌入”

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 中的元素。