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

嵌套指令，child不能正确“转换”

1 个答案: