Question

我有一个MVC / Angular项目。在共享MVC _layout文件中，我在Web API调用中创建基于JSON的UI菜单。我使用angular绑定布局文件中的数据。

我遇到的问题是当我导航到新页面时MVC重新加载_layout文件，因此该文件中的$ scope.menu变量不再存在，因此我的UI菜单消失了。然后，控制器再次调用Web API调用并重新填充所有内容，以便重新创建UI菜单。

基本上我需要一种方法来防止每次导航到新页面时重新加载菜单。由于我一起使用角度和MVC，我不确定最好的方法。有没有办法让我的$ scope.menu变量在重新加载共享_layout页面时被删除，我可以将JSON存储在sessionStorage中并重新创建$ scope.menu，这样我的UI菜单就不会消失吗？任何帮助，将不胜感激。

//Angular code that creates the menu in the MVC shared _layout file.

<li class="dropdown" ng-repeat="item in menu" menu-item="item">
   <a class="dropdown-toggle" role="button" aria-expanded="false" aria-haspopup="true" href="#" data-toggle="dropdown">{{item.Name}} <span class="caret"></span></a>
   <ul class="dropdown-menu">
<li>
   <div class="dropdowncontainer">
   <div class="row" style="padding: 10px; height: 100%">
   <div class="col-md-4 col-lg-4 col-sm-12 no-float box-content right" ng-show="item.Places.length" style="height: 100%">
      <h4 style="vertical-align:top">Places</h4>
      <ul class="list-unstyled">
         <li ng-repeat="plc in item.Places"><a href="/report/{{plc.Name | removeSpaces}}">{{plc.Name}}</a></li>
      </ul>
   </div>

//Controller that populates the menu with a web api call

mainModule.controller('navCtrl', function ($scope, dataService, modelService) {
if (!$scope.menu) {
    $scope.menu = modelService;

        dataService.getJson().then(
          function (res) {
              angular.copy(res.data, modelService);
          },
          function () {
              alert('Error Loading Navigation !');
          }
        );
    }
});

angular.module('main').value('modelService', []);

angular.module('main')
.factory('dataService', ['$http', function ($http) {
return {
    getJson: function () {
        return $http.get('web api call');
    }
};
}]);

MVC共享布局文件中的动态角度菜单

0 个答案: