UI-Routerで入れ子になったUIビューをロード/レンダリングする方法

index.htmlという1ページのアプリケーションがあります。このページは、私の部分的な部分をロードするアプリケーションのメインページです。UI-Routerで入れ子になったUIビューをロード/レンダリングする方法

は、ここに私のIndex.htmlです：

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

が、私はこの中に一部が、その後、私はちょうど追加した部分に部分的にロードします。

私が追加したい部分はdashboard.htmlと呼ばれ、/dashboardルーティングがヒットしたときに呼び出される必要があります。次にUI-Viewの部分をdashboard.htmlの中にロードします。

これを実現するために必要な情報は他にありませんか？

EDIT：

.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"の状態も暗黙的にアクティブです。

例：

$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-Routerで入れ子になったUIビューをロード/レンダリングする方法

答えて

関連する問題