如何在 UI-Router 中加载/渲染嵌套的 UI-Views答案

【问题标题】：How to load/render nested UI-Views in UI-Router如何在 UI-Router 中加载/渲染嵌套的 UI-Views
【发布时间】：2016-12-15 20:47:03
【问题描述】：

我有一个应用程序，其中有一页名为index.html。此页面是我将部分内容加载到的应用程序内的主页。

这是我的Index.html：

<body>
    <!--<div id="view" ng-view></div>-->
    <div id="view" ui-view></div>
</body>

我想将一个 Partial 加载到其中，然后将一个部分加载到我刚刚添加的部分中。

我要添加的部分称为dashboard.html，应该在/dashboard 路由被命中时调用。然后我想将部分加载到UI-View 里面dashboard.html。

我不知道我还需要提供哪些其他信息才能做到这一点？

编辑：

    .state('dashboard', {
        url: '/dashboard',
        templateUrl: 'partials/dashboard.html',
        controller: 'dashboard'
    })
    .state('dashboard.item', {
        //url: '/dashboard/calender',
        templateUrl: 'partials/calender.html',
        controller: 'aceTrackerDash'
    })

【问题讨论】：

我已经编辑了我的答案我的朋友，看看
我的建议是通过命名视图。也请提供html的代码。

标签： javascript angularjs routing angular-ui-router

【解决方案1】：

为此目的定义嵌套状态很好。当应用程序处于特定状态时——当状态为“活动”时——它的所有祖先状态也隐式地处于活动状态。下面，当 "contacts.list" 状态处于活动状态时，"contacts" 状态也隐式处于活动状态，因为它是 "contacts.list" 的父状态。所以所有嵌套定义的视图都加载到它们的正确位置：

示例：

$stateProvider
  .state('contacts', {
    templateUrl: 'contacts.html',
    controller: function($scope){
      $scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
    }
  })
  .state('contacts.list', {
    templateUrl: 'contacts.list.html'
  });

<!-- index.html -->
<body ng-controller="MainCtrl">
   <div ui-view></div>
</body>

<!-- contacts.html -->
<h1>My Contacts</h1>
<div ui-view></div>

<!-- contacts.list.html -->
<ul>
  <li ng-repeat="contact in contacts">
    <a>{{contact.name}}</a>
  </li>
</ul>

Plunker：http://plnkr.co/edit/7FD5Wf?p=preview

也看看这个：

Angular-UI Router: Nested Views Not Working

【讨论】：

感谢您的回答我已经编辑了我的问题并添加了我的路由器，但这仍然没有出现？
@BenClarke 我在我的回答中向您推荐一个更完整的答案