Question

如果我有这个课程：

  public class MainMenuModel
    {
         public MainMenuModel(string transKey, string stateName, string displayUrl, bool hasSubMenu= false,List<SubMenuModel>subMenu=null)
    {
        TransKey = transKey;
        StateName = stateName;
        DisplayUrl = displayUrl;

        HasSubMenu = hasSubMenu;

        SubMenu = subMenu;


    }
    public string TransKey { get; set; }
    public string StateName { get; set; }
    public string DisplayUrl { get; set; }

    public bool HasSubMenu { get; set; }

    public List<SubMenuModel>SubMenu { get; set; }

}

如果我像这样填充那个类：

  MainMenu.Add(new MainMenuModel("MY_TICKETS", "account.tickets", "/account/tickets/"));
               MainMenu.Add(new MainMenuModel("TRANSACTION_HISTORY", "account.transactionhistory", "/account/transactions"));
               MainMenu.Add(new MainMenuModel("PAYIN","account.payin","/account/payin"));
               MainMenu.Add(new MainMenuModel("PAYOUT", "account.payout", "/account/payout"));
               MainMenu.Add(new MainMenuModel("TICKET_PAYOUT", "account.ticketpayout", "/account/ticketpayout"));
               MainMenu.Add(new MainMenuModel("SETTINGS","default","default",true,
               new List<SubMenuModel>(){
               new SubMenuModel("PERSONAL_INFORMATION","account.personalinformation","/account/personalinformation"),
               new SubMenuModel("NOTIFICATIONS","account.notificationsettings","/account/notifications"),
               new SubMenuModel("CHANGE_PASSWORD","account.changepassword","/account/passwordchange"),
               new SubMenuModel("GAME_SETTINGS","default","default"),
               }));

               MainMenu.Add(new MainMenuModel("PROMOTIONS", "default", "default", true,
               new List<SubMenuModel>(){
               new SubMenuModel("BONUSES","default","default"),
               new SubMenuModel("COMPETITIONS","default","default"),
               new SubMenuModel("VOUCHER_REDEEM","default","default"),
               }));

我怎样才能在角度调用它..并将其传递给$ scope.something？有什么建议吗？

Answer 1

我的建议是您将WebApi与现有的ASP.NET MVC层一起设置。

有了这个说，你需要做的就是将Rest服务实现为GET或POST，并使用$http从角度进行简单的调用：

服务器端

使用Microsoft Web Api Controller类“ValuesController”但它可以是任何类名，如下所示：

public class ValuesController : ApiController
{              
   public string Get(int id){ return "value"; }
   ...

客户端

在我的AngularJS Controller函数中，它使用$http服务获取值：

$http({method:'GET',url: '/api/values/1'}).success(function(data){
        $scope.value  =data;
    })

Answer 2

如果您需要在服务器上形成页面 - 尝试序列化此集合并输入角度控制器init

<div ng-controller="SomeController" ng-init="initialize('@Model.ToJson()')">

Answer 3

首先，您需要设置一个可以通过ajax访问的服务器端点，它将MainMenu结构作为JSON响应返回。

一旦设置了端点，有几种方法可以将这些数据转换为角度，尽管我认为最好的方法是创建一个Angular服务来管理这些数据。这样的事情（忍受我，因为我不知道你的项目的细节）：

angular.module('application').factory('mainMenuService', ['$http', function($http) {
    var ServiceInstance = {
      _menuItems: [],
      _fetchMenuItems: function() {
        var self = this;
        $http.post('your/server/endpoint').success(function(data, status, headers, config) {
          // Clear exisiting items
          self._menuItems.length = 0;

          // Assuming menu items have been returned as JSON structure
          // Add them all into the Service's mainMenu cache
          self._menuItems.push.apply( self._menuItems, data.menuItems );
        });
      },
      getMenuItems: function() {
          if (!this._menuItems.length) {
              this._fetchMenuItems();
          }

          // No need to wait on async operation because we're using the same array instance,
          // and angular will observe this instance and detect when new items are added.
          return this._menuItems;
      }
    };
    return ServiceInstance;
}]);

然后，在Angular控制器中使用服务：

// Notice how we reference the 'mainMenuService' here, and angular will inject it automatically
angular.module('application').controller('mainMenuController', ['mainMenuService', function (mainMenuService) {
    $scope.mainMenuItems = mainMenuSevice.getMenuItems();
}]);

通过这种方式，您可以将数据与控制器分离，并且可以在任何需要的控制器中重复使用该服务。

如何将参数从类传递到angular $ scope

3 个答案: