title: AngularJs MMenu Directive
body: <p>I want to create a mmenu directive for my angular app. I have done this for now. Also used <code>link: function(){}</code> in directive.</p>
  
  <p>jQuery Plugin Webpage : <a href="http://mmenu.frebsite.nl/" rel="nofollow">http://mmenu.frebsite.nl/</a></p>
  
  <p>Directive:</p>
  
  <pre><code>angular.module('myApp').directive('sideMenu', function() {
       return {
          restrict : 'E',
          templateUrl : 'scripts/partials/side-menu.html'
       };
  });
  </code></pre>
  
  <p>Partial (side-menu.html):</p>
  
  <pre><code>&lt;nav id="menu"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-power-off"&gt;&lt;/i&gt; Logout&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt;
              Extra Link&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="javascript:void(0);"&gt;History&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:void(0);"&gt;The team&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="javascript:void(0);"&gt;Management&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="javascript:void(0);"&gt;Development&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;&lt;/li&gt;
          &lt;/ul&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>Written this jQuery part in partial itself:</p>
  
  <pre><code>$(function() {
      $('nav#menu').mmenu({
         extensions   : [ 'effect-slide-menu', "border-full" ],
         offCanvas: {
            position: "right"
         },
         navbar       : {
              title   : '&lt;img src="img/logo.png"/&gt;'
         },
         navbars      : [
          {
              position    : 'bottom',
              content     : [
                  '&lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;',
                  '&lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;&lt;/a&gt;',
                  '&lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;'
              ]
          }
        ]
     });
   });
  </code></pre>