I want to use ng-include to render the sidebar of the template. The template requires jQuery metisMenu plugin for dropdowns.
Issue: Plugin only works when I load the following scripts inside the partial template 'sidebar.html':
<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 want to load the plugin only once inside index.html as I may require it in other partials as well. Here's a Plunker of the working model which requires script loading inside partials. Note that on moving scripts from sidebar.html to index.html the dropdown menu stops working.
Any help would be appreciated. Thanks in advance.
It probably doesn't work on
index.html
because when it's fired the side-menu isn't present yet. This is the way to fire the jQuery method after AngularJS get's the partial for siteI have the same problem. You need add metisMenu(); in your main controller:
You can add onload callback function at ng-include
and call metisMenu function in loaded function
This is Plunker
Adding a link object that called $(element).metisMenu() inside of a setTimeout function fixed it for me.