嵌套指令，子指令don't "transclude"正确

Nested directive, child don't "transclude" correctly

本文关键字：quot 指令 transclude 正确 don 嵌套      更新时间：2023-09-26

下面是我要做的: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)
};
});

简而言之，我想在指令中嵌套。它几乎可以工作，除了' translude '的东西不能用于嵌套的元素。

我怎样才能得到这份工作?

问题出在下面一行:

template: getTemplate(itemType)

参数itemType还不知道。它没有定义。稍后调用link函数。你必须在link函数中动态切换模板，并使用$compile()编译它们，例如

$compile(getTemplate(itemType))(scope)

然后你会得到一个可以插入到DOM中的元素

相关文章：