Javascript AngularJs MMenu指令

我想为我的angular应用程序创建一个mmenu指令。我现在已经这样做了。在指令中也使用了

link:function（）{}

jQuery插件网页：

指令：

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

部分（side menu.html）：

编写了部分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>'
            ]
        }
      ]
   });
 });

$（函数（）{
$（“导航菜单”）.mmenu({
扩展：['效果幻灯片菜单'，“边框已满”]，
非画布：{
位置：“右”
},
导航栏：{
标题：“”
},
导航栏：[
{
位置：'底部'，
内容：[
'',
'',
''
]
}
]
});
});

以下是一个示例，说明如何在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>

侧菜单示例

试试这个：

它允许基于控制器的（$scope）数据创建Mmenu。

---

用法非常简单-只需添加js，在html中添加

标记，并在控制器中添加数据-所有的魔法都在您的范围之外完成。
Awesome dude。。。这就是我想要的！
  <!-- 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>