0

我正在尝试使用可选的滑动侧边栏菜单模块化标题栏。我目前正在使用angular-foundation，它是侧边栏的画布外组件。这个想法是你可以有一个标题栏，它可以触发一个侧边栏菜单打开（在你需要菜单的页面中）或者只是一个没有菜单的简单标题（例如：当用户没有登录时）

问题是画布侧边栏需要两个包裹层，这将包裹页面的整个内容，以方便菜单的滑动，将内容推到一边。

我的想法是创建一个<my-header>指令，其范围属性称为 sidebar，当设置为 true 时，将在页面上包含一个画布外的侧边栏菜单。此外，我创建了另一个名为“helper”的指令<my-off-canvas>，它有一个带有所需包装 div 的模板，这些 div 使用一些类指令来实现它们的魔力。

这是 plunkr： http ://plnkr.co/edit/5f6gUh0AixRNibs1rZTa?p=preview

问题： 包装<my-off-canvas>器不会被编译到模板中，它将保留为<my-off-canvas>指令。当我手动添加正确的包装器和类指令以使其工作时，存在一些依赖性问题，因为一些类指令offCanvasList和leftOffCanvasToggle要求指令和控制器是画布外功能的 2 个包装层的一部分。

目前正在寻找关于我应该如何实现这一点的想法，也许这种方法毕竟不可行，我应该选择不同的实现？我对建议和想法持开放态度，因为在指令方面我不是很有经验。

4

1 回答 1

0

更新的 Plunker

您可以在 myOffCanvas 指令中包含您的 myHeader 指令。添加 ng-transclude 将允许您在标记中添加其余内容。请注意，如果您使用的是 AngularJS 1.2.x，则必须使用 ng-transclude 作为属性（相对于我在演示中的元素）

var app = angular.module('foundationDemoApp', ['mm.foundation']);
app.directive('myOffCanvas', function(){
    return {
        restrict: 'E',
        scope: {
            sidebar : '='
        },
        transclude: true,
        template: 
            '<div class="off-canvas-wrap">' +
                '<div class = "inner-wrap">' +
                  '<my-header></my-header>' +
                  '<ng-transclude></ng-transclude>' +
                '</div>' +
            '</div>'
    };
})
app.directive('myHeader', function(){
      return {
        restrict: 'E',
        template: [
            '<nav class="tab-bar">',
                '<section ng-if = "sidebar === true" class = "left-small">',
                    '<a class="left-off-canvas-toggle menu-icon"><span></span></a>',
                '</section>',
                '<section class="middle tab-bar-section">',
                    '<h1 class="title">Header Title</h1>',
                '</section>',
            '</nav>',
            '<aside ng-if= "sidebar === true" class="left-off-canvas-menu">',
                '<ul class="off-canvas-list">',
                    '<li><a href="#">Main Menu</a></li>',
                    '<li><a href="#">Item 1</a></li>',
                    '<li><a href="#">Item 2</a></li>',
                    '<li><a href="#">Item 3</a></li>',
                '</ul>',
            '</aside>'
        ].join(''),

    };
})

然后在您的标记中，您可以使用：

<my-off-canvas sidebar="true">
      <h3>All of your other content here...</h3>
      <p>Lorem Ipsum bla bla bla</p>
</my-off-canvas>
于 2015-04-30T10:04:01.067 回答