jQuery的metismenu不工作与AngularJS控制器加载数据异步 [英] jquery metismenu not working loading data async with AngularJS controller

问题描述

我有Jquerymetis菜单中的一个问题。我想加载从数据库菜单元素和我使用AngujarJS控制器到达与菜单元素JSON。

I have a problem with Jquerymetis menu. I want to load menu elements from Database and I'm using AngujarJS controller to get the JSON with menu elements.

下面是AngularJSController

Here is 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我有角指令的元素添加到菜单。

Then in a PartialView of my ASP.NET MVC project I have the Angular directives to add the elements to menu.

<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>

这是增加罚款元素的菜单，但它不工作的崩溃和扩大。它apear扩大，我不能垮的元素。

This is adding fine the elements to the menu but it doesn't work the collapse and expand. It apear expanded and I can't collapse the elements.

我觉得现在的问题是，我有打电话给 $（'＃侧面菜单'）metisMenu（）; 后装元素，但如果我上调用此浏览器控制台这是行不通的。

I think that the problem is that I have to call $('#side-menu').metisMenu(); after loading elements but if i call this on the browser console it doesn't work.

如何才能实现这一目标？我是新与棱角分明。在这里，我看到了同样的问题，但我便无法解决问题。
https://github.com/onokumus/metisMenu/issues/22

How can achieve this? I'm new with Angular. Here I have seen the same issue but I could't solve the problem. https://github.com/onokumus/metisMenu/issues/22

修改

我发现，梅蒂斯菜单不能被调用一次以上。我已经删除 $（'＃侧面菜单'）metisMenu（）; 从onready事件JS，我从浏览器控制台叫它，它现在的作品。

I have discovered that the Metis Menu could not be called more than once. I have deleted $('#side-menu').metisMenu(); from the onready event JS and I called it from Browser console and it now works.

现在我需要帮助的时候菜单元件装入采用了棱角分明调用它。我在新的角度，我需要一些帮助。

Now I need help to call it using angular when the menu elements are loaded. I'm new at Angular and I need some help.

推荐答案

我已经解决了使用角指令执行时NG重复的最后一个元素呈现给DOM的metisMenu功能的问题。

I have solved the problem using an Angular Directive to execute the metisMenu function when last element of the ng-repeat is rendered to the DOM.

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

然后我不得不使用该指令伍重复元素

Then I have to use the directive on the Ng repeat element

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

您可以看到完整的HTML code。关于我的问题。

You can see the complete HTML code on my question.

我完全新的角，所以我不是专家。即使是我希望这个解决方案可以帮助别人。

I'm totally new to Angular so I'm not an expert. Even that I hope this solution can help someone.

这篇关于jQuery的metismenu不工作与AngularJS控制器加载数据异步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！