如何在UI中加載/呈現嵌套的UI視圖路由器

我有一個叫做index.html的頁面。這個頁面是應用程序中的主頁面，我加載了部分內容。如何在UI中加載/呈現嵌套的UI視圖路由器

這裏是我的Index.html：

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

我想加載一個部分到這一點，但隨後的部分到部分我剛纔說。

我想要添加的部分稱爲dashboard.html，當/dashboard命中時應該調用。然後我想加載一個內的UI-View。

我不知道我需要提供哪些其他信息才能實現此目的？

編輯：

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

來源

2016-12-15 Ben Clarke

我已經編輯我的答案我的朋友，一起來看看 – Ramin

我的建議是要經過命名視圖。請提供html的代碼。 –

其良好定義的嵌套用於此目的的狀態。當應用程序處於特定狀態時 - 當狀態爲「活動」時 - 其所有祖先狀態也都隱式激活。下面，當"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

來源

2016-12-15 21:10:32 Ramin

感謝您的答案我編輯我的問題，並添加了我的路由器，但這仍然不會出現？ –

@BenClarke我在這裏回答你一個更完整的答案 – Ramin

如何在UI中加載/呈現嵌套的UI視圖路由器

回答

相關問題