javascript - AngularJs MMenu 指令

Question

我想为我的 Angular 应用程序创建一个菜单指令。我现在已经这样做了。还在指令中使用了 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

以下是如何在 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