jquery metisMenu 在 ng-include 中不起作用答案

【问题标题】：jquery metisMenu not working inside ng-includejquery metisMenu 在 ng-include 中不起作用
【发布时间】：2014-12-07 18:20:57
【问题描述】：

我想使用 ng-include 来渲染template 的侧边栏。该模板需要 jQuery metisMenu 插件 用于下拉菜单。

问题：仅当我在部分模板“sidebar.html”中加载以下脚本时，插件工作：

<script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/1.1.0/metisMenu.js"></script>

<script>$(function() {
    $('#side-menu').metisMenu();
});</script>

当我尝试将它们加载到 inside index.html 时，失败。

我只想在 index.html 中加载插件一次，因为我可能在其他部分中也需要它。这是工作模型的Plunker，它需要在部分内部加载脚本。请注意，将脚本从 sidebar.html 移动到 index.html 时，下拉菜单将停止工作。

任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： jquery angularjs jquery-plugins angularjs-ng-include

【解决方案1】：

我也有同样的问题。您需要添加 metisMenu();在你的主控制器中：

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

【讨论】：

【解决方案2】：

它可能在index.html 上不起作用，因为当它被触发时，侧面菜单还不存在。这是在 AngularJS 获取站点的部分后触发 jQuery 方法的方法

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

【讨论】：

我根据您的建议进行了更改。如果没有部分内部的脚本，下拉菜单仍然无法工作。Plunker

【解决方案3】：

在 setTimeout 函数中添加一个调用 $(element).metisMenu() 的链接对象为我修复了它。

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

您可以在 ng-include 中添加 onload 回调函数

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

并在加载的函数中调用metisMenu函数

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

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

这是Plunker

【讨论】：