アンギュラUIルーターネストビュー

Question

imは、UIルータを使用して、ネストビューを私の通常のビューに注入しようとしています。 私はそれがNG含めることによって可能なことを知っています。しかし、私はUI-Routerを使ってそれを解決したいです。

私のHTMLは以下のとおりです。

<div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Project todos</div>
                <div class="panel-body">
                    <div ui-view="todos"></div>
                </div>
            </div>
        </div>
    </div>

.

それから私のスクリプトで私は状態を得ました：

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos': {
       templateUrl: 'views/project/todos.html'
      }
   }
})

.

アップデート - このようなものはありませんか？

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos@project': {
         templateUrl: 'views/project/todos.html'
      }
   }
})

.

だれでも能力や何かを見つけることができますか？私はドキュメントを読みました。私は何が悪いのかわからない。

事前にありがとう！

Answer 1

plunker 、

index.htm <div ui-view="" ></div>を持つ必要があります。これはProject.htmlを注入しました。次に、ステート定義を調整してネストしたビューを注入します - ui-view絶対命名を使用して：

  .state('project', {
    url: '/project/:projectId',

    views: {
      '' : {
        templateUrl: 'views.project.project.html',
        controller: 'ProjectCtrl',
      },
      'todos@project': {
        templateUrl: 'views.project.todos.html'
      }
    }
  });

.

絶対名のtodos@projectは、Project.htmlにTODOS.HTMLを挿入します。 plunker

：

• 名前を表示 - 相対vs.絶対値

a cite：

...シーンの後ろに、すべてのビューにviewname@statenameのスキームに続く絶対名が割り当てられ、ViewNameはビューディレクティブで使用され、状態名は状態の絶対名である。連絡先。絶対構文でビュー名を書くこともできます。