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菜单不能被多次调用。我已经$('#side- menu').metisMenu();从就绪事件JS中删除了，并从浏览器控制台中对其进行了调用，现在它可以工作了。

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

Answer 1

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

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

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

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

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

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