jquery metisMenu not working inside ng-include

问题:

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.

回答1:

I have the same problem. You need add metisMenu(); in your main controller:

app.controller('mainController', function($scope, Config) {
  $('#side-menu').metisMenu();
});

回答2:

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

回答3:

Adding a link object that called $(element).metisMenu() inside of a 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'
};});

回答4:

You can add onload callback function at ng-include

<div ng-include="'sidebar.html'" onload="loaded()"></div>

and call metisMenu function in loaded function

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.loaded = function() {
    $('#side-menu').metisMenu();
}
});

This is Plunker