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.

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");
        });
  }]);

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>

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.

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.

How can achieve this? I'm new with Angular. Here I have seen the same issue but I could't solve the problem.

EDIT

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.

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.

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");
        });
  }]);

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>

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.

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.

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./onokumus/metisMenu/issues/22

EDIT

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.

• javascript
• jquery
• angularjs
• asp-mvc

Share Improve this question Follow edited Dec 2, 2015 at 21:33 JuanDYB asked Dec 1, 2015 at 17:32 JuanDYBJuanDYB 75433 gold badges1212 silver badges3030 bronze badges 1

• I have edited my question adding some conclusion about the problem. – JuanDYB Commented Dec 2, 2015 at 21:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

You can see the plete 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.

MetisMenu could not be called more than once because it calls init() function only once in its lifetime.

So it means if you are loading content of a element <ul class="nav" id="side-menu"> asynchronously using ajax and after that again binding event to <ul class="nav" id="side-menu"> by $('#side-menu').metisMenu(); won't make any difference.

So what you have to do is firstly destroy the existing metismenu event handler and then create a new one like below:

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

So your AngularJS Controller should be like below:

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");
      });
  }
]);