Question

我正在MVC和angular中编写一个动态SPA。这个概念就是这样主页面由MVC控制，使用局部视图_Layout作为组织HTML。 MVC模型包含3个枚举。每个都是可枚举的表示_layout页面的左侧，中间或右侧部分。

可枚举项是一个小部件模型，无论预期如何都看起来相同输出包含用于数据查找的Id和MVC局部视图的名称知道如何显示该数据。这是小部件模型

public class Widget{
  public int Id { get; set; }
  public string WidgetView { get; set; }  
}

每个小部件都有一个ID，可以访问小部件的唯一内容和＃34; WidgetView＆＃34;知道用于显示该内容的剃刀页面。这是_Layout的部分内容

<body ng-app="app-widget">
    <div id="sidebar" class="nav">
        @{
            foreach (var item in Model.Sidebar)
            {
               @Html.Partial( item.WidgetView, item )
            }
        }
     </div>
      ...
      @RenderBody()  // uses same model to perform similar functions
      ...
      <script src=" all my needed script files "></scripts>

</body>

一旦调用上面的@ Html.Partial，我的问题就从下面开始了。作为配置局部视图开始加载，我需要传递MVC模型，特别是Id，页面加载后返回角度控制器，但是这个代码显然是在页面构建时运行的并且还没有加载widgetDataService给我一个错误 widgetDataService不存在。真的，它不是因为定义它的脚本位于_Layout的底部。移动服务脚本这里没有用，因为我也必须在这里移动angular.js。但即使这很疯狂，因为它在服务器上运行。

// _NavMenu.cshtml
@model ViewModels.WidgetModel
<script type="text/javascript">
    widgetDataService.prepareWidgetData(@Model.Id);
</script>

<div ng-controller="navMenuController">
    <ul class="nav menu" ng-repeat="navItem in vm.navItems">
        <li><a href="~/{{navItem.Controller}}/{{navItem.Action}}/{{navItem.Optional}}">
        {{navItem.Name}}
            </a>
        </li>
     </ul>
</div>

我不知道如何解决这个问题。当我像这样动态编写页面时，如何将MVC模型恢复到角度，在每个小部件剃须刀中运行之后运行？

使用angular在MVC中构建动态SPA

0 个答案: