javascript - AngularJs MMenu Directive -

i want create mmenu directive angular app. have done now. used link: function(){} in directive.

jquery plugin webpage : http://mmenu.frebsite.nl/

directive:

angular.module('myapp').directive('sidemenu', function() {      return {         restrict : 'e',         templateurl : 'scripts/partials/side-menu.html'      }; }); 

partial (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>             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> 

written jquery part in partial itself:

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

here example how can use mmenu in angular app:

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