优雅汉堡菜单指令

我已经开始开发一个汉堡模块，2个部分基本上包括：优雅汉堡菜单指令

一个“汉堡大开眼界”按钮，打开的菜单中，最有可能的属性指令，包括点击事件监听器，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>

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

我一直在使用蛮力的方法，那就是使用来自Rootcope的广播来发送“open”消息给菜单指令。它的作用像一个魅力，但我不满意它。

另一种方法是设置一个即使在按钮上，但我会把这当作一个奇怪的原因失败。我可能是错的，但我相当确定有一种更优雅的方式来使用AngularJS范例来连接这两个元素，而不使用广播或事件。

你知道吗？我想我基本上是问如何组件如ui bootstrap模式服务实际上工作。

来源

2015-03-25 Simon Budin

我想实现我想要的最简单和最优雅的方法是让我的2个元素在burgerController下，并为它们提供继承范围。 – 2015-03-25 12:06:10

这是我想到的。这对我来说似乎是快速和可重用的，让我知道你是否可以创造更好的东西！

基本上，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>

来源

2015-03-25 18:49:17

优雅汉堡菜单指令

回答

相关问题