jquery metisMenu not working inside ng-include

て烟熏妆下的殇ゞ 提交于 2020-01-03 19:00:40

问题


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



来源:https://stackoverflow.com/questions/26335696/jquery-metismenu-not-working-inside-ng-include

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!