angular reapply directive when scope is changed
by manoj
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://demo.onokumus.com/metisMenu/demo.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="clearfix" ng-app="Application" ng-controller="Ctrl">
<aside class="sidebar">
<nav class="sidebar-nav">
<ul side-menu="menus" id="menu2">
<li ng-repeat="menu in menus">
<a href="#">{{menu.name}}<span class="fa arrow"></span></a>
<ul>
<li ng-repeat="submenu in menu.submenu"><a href="#">{{submenu.name}}</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<button ng-click="updateData()">Update</button>
</div>
JavaScript
/**
* metisMenu v1.0.2
* Author : Osman Nuri OkumuÅŸ
* Copyright 2014
* Licensed under MIT
*/
;(function ($, window, document, undefined) {
var pluginName = "metisMenu",
defaults = {
toggle: true
};
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
var $this = $(this.element),
$toggle = this.settings.toggle;
if (this.isIE() <= 9) {
$this.find('li.active').has('ul').children('ul').collapse('show');
$this.find('li').not('.active').has('ul').children('ul').collapse('hide');
} else {
$this.find('li.active').has('ul').children('ul').addClass('collapse in');
$this.find('li').not('.active').has('ul').children('ul').addClass('collapse');
}
$this.find('li').has('ul').children('a').on('click', function (e) {
e.preventDefault();
$(this).parent('li').toggleClass('active').children('ul').collapse('toggle');
if ($toggle) {
$(this).parent('li').siblings().removeClass('active').children('ul.in').collapse('hide');
}
});
},
isIE: function() {//https://gist.github.com/padolsey/527683
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}
};
$.fn[ pluginName ] = function (options) {
return this.each(function () {
//if (!$.data(this, "plugin_" +...