优雅的汉堡菜单指令答案

【问题标题】：Elegant burger menu directive优雅的汉堡菜单指令
【发布时间】：2015-03-26 02:49:17
【问题描述】：

我已经开始开发一个汉堡模块，基本上由两部分组成：

一个打开菜单的“burger-opener”按钮，很可能是一个属性指令，包括一个单击事件侦听器、dom 和 css 不可知
一个“汉堡菜单”元素，很可能是受益于嵌入的指令，让客户端决定菜单包含的内容以实现可重用性。这基本上在它的顶部，在 ng-transclude 元素之前提供了一个关闭按钮。

就功能而言，这两个元素之间必须有紧密的关系，即按钮元素将在汉堡菜单元素中调用“打开”。

问题是，我有一个约束，即按钮和菜单不必相互包含。例如，必须能够像这样使用模块

<ul burger-menu>
    <li>Save</li>
    <li>Load</li>
</ul>
<section id="container">
    <a href="" burger-opener class="burgerOpen"><a>
</section>

这个约束似乎是自动排除指令到使用“require”语法的指令通信，因为这个 angularjs 功能假设指令是自包含的。所以除非我创建一个包含我的 2 个元素的顶级 DOM 控制器......我被卡住了。

我一直在使用蛮力方法，即使用来自 rootscope 的广播按钮将“打开”消息发送到菜单指令。它就像一种魅力，但我对此并不满意。

另一种方法是在按钮上设置一个偶数，但出于某种奇怪的原因，我会将其视为失败。我可能错了，但我很确定有一种更优雅的方法可以使用 AngularJS 范例连接这两个元素，而不使用广播或事件。

你知道吗？我想基本上我是在问诸如 ui bootstrap modal service 之类的组件实际上是如何工作的。

【问题讨论】：

我想实现我想要的最简单和最优雅的方法是将我的 2 个元素放在 burgerController 下，并为它们提供继承范围。

标签： angularjs angularjs-directive hamburger-menu

【解决方案1】：

这就是我想出的。这对我来说似乎足够快且可重复使用，如果你能创造出更好的东西，请告诉我！

基本上，burgerMenu 指令共享其父范围（scope:false 或没有，默认情况下为 false）并使用“控制器作为”语法在其中设置一个 api。因此，用于打开菜单的按钮具有带有burgerCtrl.openBurger() 的明确单击处理程序。

这里是 burgerMenu 指令：

angular.module('app')
.directive("burgerMenu", [function () {
    return {
        scope: false,
        controller: function () {
            var self = this;
            this.openBurger = function () {
                self.isOpen = true;
            };
            this.closeBurger = function () {
                self.isOpen = false;
            };
            this.isOpen = false;
        },
        controllerAs: 'burgerCtrl',
        restrict: 'E',
        replace: true,
        transclude: true,
        templateUrl: 'js/app/burgerMenu/_burger.tpl.html'
    }
}
]);

模板：

<section class="nav_bar" ng-class="{open:burgerCtrl.isOpen}">
    <div class="nav_content" ng-show="burgerCtrl.isOpen">
        <h1 ng-click="burgerCtrl.closeBurger();">X</h1>
        <ng-transclude></ng-transclude>
    </div>
</section>

Css（主要思想）：

.nav_bar { position:fixed; }
.nav_bar.open { width: 240px; }

用法：

<section id="header">
    <div class="burger" ng-click="burgerCtrl.openBurger()"></div>
    <h1>App title</h1>
</section>
<section data-burger-menu>
    <ul id="menu">
         <li><a href="#/" ng-click="home.save();">Save</a></li>
         <li><a href="#">Share</a></li>
         <li><a href="#/load/1">Load n°1</a></li>
    </ul>
</section>

【讨论】：