角度ルーティングui-view内の別のui-view

Question

受付概要：

インデックスhtmlには2つのタブがあります。そこ私たちはそのようにこれらのタブをルーティング：

<div ui-view></div> 

を私たちは、セレクタを持つ2つ目のタブでは、そのような別のUIビューでそのスイッチ]タブの内容：

<div ui-view="{{vm.currentView}}"></div> 

vm.currentViewは名前がありますルーティング状態（ 'book1'など）のビューのデータ内容と名前が変更されていますが、テンプレートの内容ではありません。

.state('tab2', { 
     abstract: true, 
     templateUrl: 'tab2.html', 
     controller: 'Tab2Controller', 
     controllerAs: 'vm' 
    }) 
    .state('tab2.content', { 
     url: '/tab2', 
     views: { 
      '': { 
       templateUrl: 'tab2.html' 
      }, 
      'book1@tab2': { 
       templateUrl: 'tab2-book1.html' 
      }, 
      'book2@tab2': { 
       templateUrl: 'tab2-book2.html' 
      }, 
      'book3@tab2': { 
       templateUrl: 'tab2-book3.html' 
      }, 
      'book4@tab2': { 
       templateUrl: 'tab2-book4.html' 
      } 
     } 
    }); 

すべては一つのことを除いて、結構です。

私は別の方法でそれを解決しました（別のui-view内のui-view概念と状態別のビューに基づいています）。しかし、私はまだ知りたいと思う： "ui-viewの内部概念を使ってこれをどうやって行うのですか？"

Here's a Plunker Example

Answer 1

「ui-viewを別のui-view内に作成する」ことが可能です。

あなたはのインデックスを持っているとします。HTML

<div ui-view="content"></div> 

と状態プロバイダーは、このようなものです： - books.htmlで

$stateProvider 
    .state('books', { 
     parent: 'pages', 
     url: '/books',     
     views: { 
      'content@': { 
       templateUrl: 'books.html', 
       controller: 'BooksController' 
      } 
     } 
    }) 

あなたには、いくつかのリンクや他のUIビュー（ネストされたUIビュー）を持っています。リンクをクリックすると、入れ子にされたUIビューが作成されます。

books.html今

<div> 
    <a ui-sref="book1"></a> 
    <a ui-sref="book2"></a> 
    <a ui-sref="book3"></a> 
</div> 
<!-- nested ui-view --> 
<div ui-view="bookDetails"></div> 

状態プロバイダは、次のとおりです。 - ブック @

$stateProvider 
    .state('books', { 
     parent: 'pages', 
     url: '/books',     
     views: { 
      'content@': { 
       templateUrl: 'books.html', 
       controller: 'BooksController' 
      } 
     } 
    }) 
    .state('book1', { 
     parent: 'books',     
     views: { 
      'bookDetails@books': { 
       templateUrl: 'book1.html', 
       controller: 'BookOneController' 
      } 
     } 
    }) 
    .state('book2', { 
     parent: 'books',     
     views: { 
      'bookDetails@books': { 
       templateUrl: 'book2.html', 
       controller: 'BookTwoController' 
      } 
     } 
    }) 
    .state('book3', { 
     parent: 'books',     
     views: { 
      'bookDetails@books': { 
       templateUrl: 'book3.html', 
       controller: 'BookThreeController' 
      } 
     } 
    }) 

bookDetails： - 'ブック' 状態か、我々に 'bookDetails' UI-ビューを移入します'bookDetails' ui-viewを 'books'状態の中で見つけ、それを 'views'オブジェクトで埋めると言うことができます。

Answer 2

私は先に説明したように、私はちょうど「他のUIビュー内のUIビュー」を作りたいが、それは不可能です。私はこの "バグ"（？）を解決する2つの方法を見つけました。

最初の方法： '別のUIビュー内のUIビュー' を除外し、コードの最小限の変更で 'NG-含ま'

最も簡単なバリアントを使用します。

function getTemplateUrl(id) { 
      switch (id) { 
       case 0: 
        return 'tab2-book1.html'; 
       case 1: 
        return 'tab2-book2.html'; 
       case 2: 
        return 'tab2-book3.html'; 
       case 3: 
        return 'tab2-book4.html'; 
       default: 
        return 'tab2-book4.html'; 
      } 
     } 

第二の方法：あなたがhereを見ての通り、私は

<ng-include src="vm.getTemplateUrl(vm.selectedBook.id)"/> 

で

<div ui-view="{{vm.currentView}}"></div> 

を交換して、コントローラに機能を追加し、thatsのは、テンプレートを切り替える正式内部の「UI-ビューを保存します別のui-view 'と州別の別々のビュー

あなたがhereを見ると正式に私は 'ui-viewの中にui-view'を保存しますが、実際には私はちょうど別の単一のui-viewからテンプレートによって1つのui-viewを完全に置き換えます（2番目のui-名）。

<ui-view class="page-container"></ui-view> 

セレクタが変更されたとき、私はテンプレートを切り替えるvm.changeHandbook（vm.selectedBook）を呼び出す：

function changeHandbook(ref) { 
      $state.go(ref.value); 
     } 

tab2.htmlの含有量が

$urlRouterProvider 
     .when('/tab2', '/tab2/book4'); 

    $stateProvider 
     .state('tab2', { 
      url: '/tab2', 
      templateUrl: 'tab2.html' 
     }) 
     .state('tab2.book1', { 
      url: '/book1', 
      params: { 
       id: 0 
      }, 
      templateUrl: 'tab2-book1.html', 
      controller: 'Tab2Controller', 
      controllerAs: 'vm' 
     }) 
     .state('tab2.book2', { 
      url: '/book2', 
      params: { 
       id: 1 
      }, 
      templateUrl: 'tab2-book2.html', 
      controller: 'Tab2Controller', 
      controllerAs: 'vm' 
     }) 
     .state('tab2.book3', { 
      url: '/book3', 
      params: { 
       id: 2 
      }, 
      templateUrl: 'tab2-book3.html', 
      controller: 'Tab2Controller', 
      controllerAs: 'vm' 
     }) 
     .state('tab2.book4', { 
      url: '/book4', 
      params: { 
       id: 3 
      }, 
      templateUrl: 'tab2-book4.html', 
      controller: 'Tab2Controller', 
      controllerAs: 'vm' 
     }); 

これは最も奇妙で困難な方法ですが、最終的にはより洗練されたコードが得られます。