ui-viewを使用したテンプレートのネスト

Question

ui-viewを使用してネストされたテンプレートを表示しようとしています。

AngularJSルーティング設定

angular.module('myApp') 
    .config(['$stateProvider', function ($stateProvider) { 
     $stateProvider 
      .state('home', { 
       url: '', 
       abstract: true 
      }) 
      .state('home.default', { 
       parent: 'home', 
       url: '/home', 
       data: { 
        pageTitle: 'Homepage' 
       }, 
       views: { 
        'content@': { 
         templateUrl: 'app/default/default.html', 
         controller: 'defaultController', 
         controllerAs: 'defaultController' 
        } 
       } 
      }) 
      .state('default.subview', { 
       parent: 'default', 
       url: '/default/subview', 
       data: { 
        pageTitle: 'Homepage - subview' 
       }, 
       views: { 
        'content@': { 
         templateUrl: 'app/subview/subview.html', 
         controller: 'subviewController', 
         controllerAs: 'subviewController' 
        } 
       } 
      }) 
     ; 
    }]); 

ホーム：/#/home

<!-- this URI should be #/home --> 
<h2>Homepage</h2> 

<select> 
    <option>Subview</option> 
</select> 

<hr> 

<!-- nested subview --> 
<div ui-view=""></div> 

サブビュー：/#/home/subview

<h2>Subview</h2> 

だから基本的に、私はあることを親ビュー（ホーム）とサブビューのコンテンツをしたいです私が訪問したときに含まれています（/＃/ home/subview）。ただし、サブビューの内容のみが表示されます。

AngularJSでui-viewとネストされたサブビューを正しく利用するためのヒントを教えてください。

Answer 1

あなたのサブビューは家の子でなければならず、サブビューを 'content @'で定義したui-viewをホームに置き換えてサブビューを設定します。

そして、それは編集

.config(['$stateProvider', function ($stateProvider) { 
$stateProvider 
    .state('home', { 
     url: '/home', 
     abstract: true, 
     template: '<ui-view/>' 
    }) 
    .state('home.default', { 

     url: '/home/default', 
     data: { 
      pageTitle: 'Homepage' 
     }, 
     views: { 
      '': { 
       templateUrl: 'home.html', 
       controller: 'defaultController', 
       controllerAs: 'defaultController' 
      } 
     } 
    }) 
    .state('home.subview', { 
     parent: 'home', 
     url: '/subview', 
     data: { 
      pageTitle: 'Homepage - subview' 
     }, 
     views: { 
      '': { 
       templateUrl: 'subview.html', 
       controller: 'subviewController', 
       controllerAs: 'subviewController' 
      } 
     } 
    }); 
}]); 

前に、ご自宅のルートがデフォルトと呼ばれていたように見えるので、私はいくつかのコピーペーストの問題を編集した：

は、私が働い構成でPlunkerを作成し、いくつかのより多くがありましたその抽象的な家の状態の問題（私はそれが期待どおりに動作することはありません）が、すべてのリンクをクリックすると、期待どおりに表示されます。あなたはまた、唯一のui-view

angular.module('myApp') 
.config(['$stateProvider', function ($stateProvider) { 
    $stateProvider 
     .state('home', { 
      url: '', 
      abstract: true, 
      template: '<ui-view></ui-view>' 
     }) 
     .state('home.default', { 
      // parent: 'home', // No need to set parent if you already prefixed state name 
      url: '', // The default subview of an abstract view should have '' for url 
      data: { 
       pageTitle: 'Homepage' 
      }, 
      templateUrl: 'app/default/default.html', 
      controller: 'defaultController', 
      controllerAs: 'defaultController' 
     }) 
     .state('home.default.subview', { 
      // parent: 'default', // No ned for parent 
      url: '/subview', // Only pu the part of the url here that is added to the parent'ls url 
      data: { 
       pageTitle: 'Homepage - subview' 
      }, 
      templateUrl: 'app/subview/subview.html', 
      controller: 'subviewController', 
      controllerAs: 'subviewController' 
     }) 
    ; 
}]); 

を持っている場合、実際にviewsセクションのための必要はありません

Plunker

Answer 2

は、私はまた、変更したUI-SREF index.html

<a ui-sref="home.default.subview">Subview Route</a> 

に

そしてui-viewはhome.html

<!-- nested subview --> 
<ui-view></ui-view> 

チェックこのplunker：

https://plnkr.co/edit/vEDYvXhp5mNjVT0yLRJN?p=preview