jquery metismenu not working loading data async with AngularJS controller

Question

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 An

Answer 1

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

Answer 2

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