AngularJs MMenu指令

Question

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

jQuery插件网页：http://mmenu.frebsite.nl/

指令：

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>'
            ]
        }
      ]
   });
 });

Answer 1

下面是一个示例，说明如何在一个角度应用程序中使用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

Answer 2

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

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