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

asynchronously using ajax and after that again binding event to
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");
      });
  }
]);