AngularJs MMenu 指令答案

【问题标题】：AngularJs MMenu DirectiveAngularJs MMenu 指令
【发布时间】：2015-06-10 14:06:10
【问题描述】：

我想为我的 Angular 应用程序创建一个 mmenu 指令。我现在已经这样做了。在指令中也使用了link: function(){}。

指令：

angular.module('myApp').directive('sideMenu', function() {
     return {
        restrict : 'E',
        templateUrl : 'scripts/partials/side-menu.html'
     };
});

部分（side-menu.html）：

<nav id="menu">
<ul>
    <li><a href="javascript:void(0);"><i class="fa fa-power-off"></i> Logout</a></li>
    <li><a href="javascript:void(0);"><i class="fa fa-cog"></i>
            Extra Link</a>
        <ul>
            <li><a href="javascript:void(0);">History</a></li>
            <li><a href="javascript:void(0);">The team</a>
                <ul>
                    <li><a href="javascript:void(0);">Management</a></li>
                    <li><a href="javascript:void(0);">Development</a></li>
                </ul></li>
        </ul></li>
</ul>

在部分本身中编写这个 jQuery 部分：

$(function() {
    $('nav#menu').mmenu({
       extensions   : [ 'effect-slide-menu', "border-full" ],
       offCanvas: {
          position: "right"
       },
       navbar       : {
            title   : '<img src="img/logo.png"/>'
       },
       navbars      : [
        {
            position    : 'bottom',
            content     : [
                '<a href="javascript:void(0);"><i class="fa fa-facebook"></i></a>',
                '<a href="javascript:void(0);"><i class="fa fa-google-plus"></i></a>',
                '<a href="javascript:void(0);"><i class="fa fa-twitter"></i></a>'
            ]
        }
      ]
   });
 });

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

这是一个如何在 Angular 应用程序中使用 mmenu 的示例：

app.js：

var app = angular.module('plunker', []);

app.directive('mmenu', function() {
    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            $(element).mmenu({});
        }
    };
});

index.html:

  <!-- Bootstrap Navbar + Main Content -->
  <div>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#menu"><b><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></b></a>
          <a class="navbar-brand" href="#">EXAMPLE</a>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="jumbotron">
        <h1>Side Menu Example</h1>
        <p>
          <a class="btn btn-lg btn-primary" href="http://mmenu.frebsite.nl/" target="_blank" role="button">mmenu homepage</a>
        </p>
      </div>
    </div>
  </div>

  <!-- Side Menu -->
  <nav id="menu" mmenu>
     <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About us</a>
           <ul>
              <li><a href="/about/history">History</a></li>
              <li><a href="/about/team">The team</a></li>
              <li><a href="/about/address">Our address</a></li>
           </ul>
        </li>
        <li><a href="/contact">Contact</a></li>
     </ul>
  </nav>

http://plnkr.co/edit/QuUEfj?p=preview

【讨论】：

太棒了，这就是我想要的！

【解决方案2】：

试试这个： https://github.com/matafonoff/angular.mmenu

它允许根据控制器的 ($scope) 数据创建 Mmenu。用法非常简单 - 只需添加 js 并在您的 html 中添加 <mmenu /> tag 并在您的控制器中添加数据 - 所有的魔法都在您的范围之外完成。

【讨论】：