jquery metismenu无法使用AngularJS控制器加载数据异步

我有Jquerymetis菜单的问题。 我想从数据库加载菜单元素，我正在使用AngujarJS控制器来获取带有菜单元素的JSON。

这是AngularJSController

var appControllers = angular.module('appControllers', []); appControllers.controller('MenuCtrl', ['$scope', '$http', function ($scope, $http) { var url = "/api/Menus/GetMenuElements"; $http.post(url). success(function (data, status, headers, config) { $scope.menuElements = data; console.log("Success"); }). error(function (data, status, headers, config) { console.log("Error"); }); }]); 

然后在我的ASP.NET MVC项目的PartialView中，我有Angular指令将元素添加到菜单中。

 
 
  {{elementL1.NAME}}  {{elementL1.NAME}}  
 0" class="nav nav-second-level"> 
 {{elementL2.NAME}} 
 0" class="nav nav-third-level"> 
 {{elementL3.NAME}} 
 
 
 
 
  

这样就可以将元素添加到菜单中，但它不能用于折叠和展开。 它扩大了，我不能崩溃元素。

我认为问题是我必须拨打$('#side-menu').metisMenu(); 加载元素后，如果我在浏览器控制台上调用它，它不起作用。

怎么能实现这个？ 我是Angular的新手。 在这里，我看到了同样的问题，但我无法解决问题。 https://github.com/onokumus/metisMenu/issues/22

编辑

我发现Metis菜单不能被多次调用。 我删除了$('#side-menu').metisMenu(); 来自onready事件JS和我从浏览器控制台调用它现在可以工作了。

现在，我需要帮助在加载菜单元素时使用angular调用它。 我是Angular的新手，我需要一些帮助。

Answer 1

我已经解决了使用Angular Directive在ng-repeat的最后一个元素呈现给DOM时执行metisMenu函数的问题。

 app.directive('metis', function ($timeout) { return function ($scope, $element, $attrs) { if ($scope.$last == true) { $timeout(function () { $('#side-menu').metisMenu(); }, 250) } }; }); 

然后我必须在Ng repeat元素上使用该指令

您可以在我的问题上看到完整的HTML代码。

我是Angular的新手，所以我不是专家。 即使我希望这个解决方案可以帮助某人。

Answer 2

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

所以这意味着如果你使用ajax异步加载一个元素

，然后再次将事件绑定到

by $('#side-menu').metisMenu(); 不会有任何区别。

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

 $('#side-menu').metisMenu('dispose'); //For stop and destroy metisMenu $('#side-menu').metisMenu(); 

所以你的AngularJS控制器应如下所示：

 var app = angular.module('app', []); app.controller('MenuCtrl', ['$scope', '$http', function ($scope, $http) { var url = "/api/Menus/GetMenuElements"; $http.post(url) .success(function (data, status, headers, config) { angular.element("#side-menu").metisMenu('dispose'); //Destroy the existing metisMenu $scope.menuElements = data; angular.element("#side-menu").metisMenu(); //Create new binding console.log("Success"); }) .error(function (data, status, headers, config) { console.log("Error"); }); } ]);