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

Question

我对 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 指令将元素添加到菜单。

<ul class="nav" id="side-menu">
    <li ng-repeat="elementL1 in menuElements" ng-init="menuElements != null">
        <a ng-if="elementL1.LINK !== null" href="{{elementL1.LINK}}"><i class="fa fa-home"></i> <span class="nav-label">{{elementL1.NAME}}</span><span class="fa arrow"></span></a>
        <a ng-if="elementL1.LINK == null"><i class="fa fa-home"></i> <span class="nav-label">{{elementL1.NAME}}</span> </a>

        <ul ng-repeat="elementL2 in elementL1.ChildMenu" ng-if="elementL1.ChildMenu.length > 0" class="nav nav-second-level">
            <li class="primerLi">
                <a>{{elementL2.NAME}}<span class="fa arrow"></span></a>
                <ul ng-if="elementL2.ChildMenu.length > 0" class="nav nav-third-level">
                    <li ng-repeat="elementL3 in elementL2.ChildMenu">
                        <a href="{{elementL3.LINK}}">{{elementL3.NAME}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

这可以很好地向菜单添加元素，但不能折叠和展开。它似乎展开了，我无法折叠元素。

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

如何做到这一点？我是 Angular 的新手。在这里我看到了同样的问题，但我无法解决问题。 https://github.com/onokumus/metisMenu/issues/22

编辑

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

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

Answer 1

当 ng-repeat 的最后一个元素被渲染到 DOM 时，我使用 Angular 指令执行 metisMenu 函数解决了这个问题。

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

然后我必须在 Ng 重复元素上使用指令

<li ng-repeat="elementL1 in menuElements" ng-init="menuElements != null" metis="">

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

我对 Angular 完全陌生，所以我不是专家。即使我希望这个解决方案可以帮助某人。

Answer 2

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

因此，这意味着如果您使用 ajax 异步加载元素 <ul class="nav" id="side-menu"> 的内容，然后通过 $('#side-menu').metisMenu(); 再次将事件绑定到 <ul class="nav" id="side-menu"> 不会有任何区别。

所以你要做的就是首先销毁现有的 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");
      });
  }
]);