jquery metismenu不工作與AngularJS控制器加載數據異步

Question

我有一個Jquerymetis菜單的問題。我想從數據庫加載菜單元素，我使用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我有角指令的元素添加到菜單。

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

這是添加到菜單的罰款元素，但它不工作的崩潰和擴大。它已經擴大了，我不能摺疊這些元素。

我認爲問題在於我必須在加載元素後調用$('#side-menu').metisMenu();，但是如果我在瀏覽器控制檯上調用它，它不起作用。

這怎麼能實現呢？我是Angular的新手。在這裏我看到了同樣的問題，但我無法解決問題。 https://github.com/onokumus/metisMenu/issues/22

編輯

我已經發現，梅蒂斯菜單不能被調用一次以上。我已經從onready事件JS中刪除了$('#side-menu').metisMenu();，我從瀏覽器控制檯調用它，現在它可以工作。

現在我需要幫助來加載菜單元素時使用角度來調用它。我是Angular的新手，需要一些幫助。

Answer 1

當ng-repeat的最後一個元素呈現給DOM時，我已經解決了使用Angular Directive執行metisMenu函數的問題。

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

然後我必須使用該指令伍重複元素

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

你可以看到我的問題完整的HTML代碼。

我完全是Angular的新手，所以我不是專家。即使如此，我希望這個解決方案可以幫助某人

Answer 2

MetisMenu不能被多次調用，因爲它只能在其生命週期中調用init()函數一次。

因此，這意味着如果你正在加載元素<ul class="nav" id="side-menu">的內容使用異步Ajax和通過$('#side-menu').metisMenu();一遍結合事件<ul class="nav" id="side-menu">後不會有任何區別。

所以，你要做的就是先破壞現有metismenu事件處理程序，然後創建一個新象下面這樣：

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

所以你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) { 
      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"); 
     }); 
    }]);