Jquery metisMenu doesn't work inside ng-include
I want to use ng-include to display the template sidebar . The template requires the jQuery metisMenu plugin for dropdowns.
Problem : only the plugin works when I load the following scripts inside the sidebar.html ' partial template:
<script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/1.1.0/metisMenu.js"></script>
<script>$(function() {
$('#side-menu').metisMenu();
});</script>
and fails when i try to load them inside index.html .
I only want to load the plugin once in index.html as I can require it in other particles too. Here 's a working model Plunker that requires a download script inside the partial files. Please note that when you move scripts from sidebar.html to index.html, the dropdown menu stops working.
Any help would be greatly appreciated. Thanks in advance.
source to share
It probably doesn't work on index.html
because when you launch the side menu isn't there yet. This is the way to run the jQuery method after AngularJS gets the partial for the site
<script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/1.1.0/metisMenu.js"></script>
<script>
$(function() {
var $browser = app.injector().get('$browser');
$browser.notifyWhenNoOutstandingRequests(function () {
$('#side-menu').metisMenu();
});
});
</script>
source to share
Adding a link object that called $ (element) .metisMenu () inside the setTimeout function fixed it for me.
app.directive('sideNav', function() {
return{
restrict: 'E',
templateUrl: 'side_nav.html',
link: function(scope, element, attrs){
// execute metisMenu plugin
setTimeout(function(){
$(element).metisMenu();
}, 1);
},
controller: function(){
this.selectedNav = {};
this.selectTab = function(setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab){
return checkTab === this.tab;
};
this.navItems = [{
name: 'Dashboard',
icon: 'fa-dashboard'
},{
name: 'Logs',
icon: 'fa-code'
},{
name: 'Firm Diagnostics',
icon: 'fa-stethoscope',
navItems: [
{
name: 'Disk I/O'
},{
name: 'Disk Space'
},{
name: 'Processor Information'
},{
name: 'Processor Activity'
},{
name: 'Memory Information'
},{
name: 'Memory Usage'
},{
name: 'Network Configuration'
},{
name: 'Processes'
},{
name: 'Services'
},{
name: 'System Information'
}
]
}];
},
controllerAs: 'sideNav'
};});
source to share
You can add onload callback function to ng-include
<div ng-include="'sidebar.html'" onload="loaded()"></div>
and call the metisMenu function in the loaded function
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.loaded = function() {
$('#side-menu').metisMenu();
}
});
This is Plunker
source to share