Question

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

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

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

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

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

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

Answer 1

Updated 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>

将带有sidemenu选项的标题模块化为指令

1 个答案: