jquery - 异步加载数据后重置MetisMenu

我正在将MetisMenu与动态<div>一起使用。当我在此<div>下加载新的子菜单时，插件停止运行。

有什么方法可以在AJAX调用的成功部分中重置插件？
我试过了：

$('#menu').metisMenu({
   toggle: false // disable the auto collapse. Default: true.
});

但它不起作用。

最佳答案

MetisMenu不能被多次调用，因为它在生命周期中仅调用一次init()函数。

因此，这意味着如果您要使用ajax异步加载元素<div id="menu">的内容，然后再将<div id="menu">绑定到$('#menu').metisMenu();的事件没有任何区别。

因此，您要做的是首先销毁现有的metismenu事件处理程序，然后创建一个如下所示的新事件处理程序：

$('#menu').metisMenu('dispose'); //to stop and destroy metisMenu
$('#menu').metisMenu();

下面的代码在angularjs中

var app = angular.module('appControllers', []);

app.controller('MenuCtrl', ['$scope', '$http',
  function ($scope, $http) {
      var url = "/api/Menus/GetMenuElements";
      $http.post(url).
        success(function (data, status, headers, config) {
            angular.element("#menu").metisMenu('dispose');  //Destroy the existing metisMenu

            //---- Update You div with data -----//

            angular.element("#menu").metisMenu(); //Create new binding
        }).
        error(function (data, status, headers, config) {
            console.log("Error");
        });
  }]);