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

我有Jquerymetis菜单的问题.我想从Database加载菜单元素,我正在使用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}} 

        

            

                {{elementL2.NAME}}
                

                    

                        {{elementL3.NAME}}
                    
                
            
        
    

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

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

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

编辑

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

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

我已经解决了使用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的新手,所以我不是专家.即使我希望这个解决方案可以帮助某人.