優雅漢堡菜單指令

我已經開始開發一個漢堡模塊，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

優雅漢堡菜單指令

回答

相關問題