0

これが私がやろうとしていることです: 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)
};
});

要するに、ディレクティブにネストしたいと思います。「トランスクルード」がネストされた要素に対して機能しないことを除いて、ほぼ機能しています。

どうすればこの仕事を手に入れることができますか？

4

1 に答える 1

0

問題は次の行です。

template: getTemplate(itemType)

パラメータ itemType はまだ不明です。それは未定義です。リンク関数は後で呼び出されます。リンク関数でテンプレートを動的に切り替え、$compile() でコンパイルする必要があります。

$compile(getTemplate(itemType))(scope)

次に、DOM に挿入できる要素を取得します。

于 2013-06-07T06:52:56.943 に答える