0

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

  • 一个打开菜单的“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 之类的组件实际上是如何工作的。

4

1 回答 1

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>
于 2015-03-25T18:49:17.337 回答