Question

我的应用程序有一个名为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'
    })

Answer 1

为此目的定义嵌套状态很有用。当应用程序处于特定状态时 - 当状态为＆＃34;活动＆＃34; 时 - 其所有祖先状态也都是隐式活动状态。下面，当"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

如何在UI-Router中加载/呈现嵌套的UI视图

1 个答案: