jquery metisMenu在ng include内部不工作

Question

我想使用ng-include来呈现模板的侧边栏。该模板需要jQuery metisMenu插件进行下拉。

问题：当我在部分模板"sidebard.html"中加载以下脚本时，只有插件才有效

<script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/1.1.0/metisMenu.js"></script>
<script>$(function() {
    $('#side-menu').metisMenu();
});</script>

当我尝试在index.html.中加载它们时，失败

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

如有任何帮助，我们将不胜感激。提前谢谢。

Answer 1

我也有同样的问题。您需要添加metisMenu（）；在您的主控制器中：

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

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

Answer 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'
};});

Answer 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