Question

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

a＆＃34;汉堡开启者＆＃34;打开菜单的按钮，很可能是属性指令，包括单击事件监听器，dom和css不可知
a＆＃34;汉堡菜单＆＃34;元素，很可能是一个受益于转换的指令，让客户决定菜单包含哪些内容以便重用。这基本上在ng-transclude元素之前在它的顶部提供了一个关闭按钮。

在功能方面，这两个元素之间必须存在紧密的关系，即按钮元素将调用＆＃34; open＆＃34;进入汉堡菜单元素。

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

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

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

我一直在使用蛮力方法，即使用来自根镜的广播按钮发送＆＃34;打开＆＃34;消息到菜单指令。它就像一个魅力，但我不满意。

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

你知道吗？我想基本上我在问ui bootstrap模态服务等组件是如何工作的。

Answer 1

这就是我的目标。这对我来说似乎很快且可重复使用，请告诉我你是否可以创造更好的东西！

基本上，burgerMenu指令共享其父作用域（scope:false或者没有，默认情况下为false）并使用'controller as'语法在其中设置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>

优雅的汉堡菜单指令

1 个答案: