同じコントローラで別のビューに角度表示を含めるにはどうすればよいですか？

Question

はどのように角度1で「親」ビューに「子」ビューの数を置くことができますか？私はそれはUIルータとの "Multiple Name Views"に関連していると思うが、私は親ビューを指定する方法が表示されません。 （そのリンクの例では、すべてのコンテナがのindex.htmlになっていることを前提としています。）

は、ここで簡単な例です：page.htmlを含め、多くのコンテンツが含まれてい

$stateProvider.state('frame', { 
    url: '/frame', 
    template: '<div ui-view></div>' 
}).state('frame.page', { 
    url: '/frame/page', 
    controller: 'page-controller', 
    templateUrl: 'views/page.html', // see below 
    views: { 
     aside: { 
      templateUrl: 'views/page-aside.html' 
     }, 
     thing: { 
      templateUrl: 'views/page-thing.html' 
     } 
    } 
}) // ... etc ... lots of other states built off of "frame" 

子供の景色のためのいくつかのコンテナ：あなたは状態のための倍数のコンセントを制御する必要があるときはさておき、あなたのそれぞれのを変更したい場合は

<div ui-view="aside"></div> 
<div ui-view="thing"></div> 

Answer 1

あなたは、複数のビューを使用します例えば、状態。

あなたはそれが親状態に影響を与えるためui-routerは、ビューを使用しているときにテンプレートを使用することはできませんので、あなたが提案の方法を行うことはできません。現在の状態は、各ビュー（複数または単一のいずれか）の構成を表します。ui-view="myView"が含まれている状態の入れ子状態を使用することが、利用可能なソリューションで、すべてのビューが親セットに設定されます。

スニペットベローズはさておき/マルチビュー制御を実施二つの状態を持つレイアウトを簡単NAV /セクションを実装する。

angular.module('app', ['ui.router']) 
 
    .config(function($stateProvider, $urlRouterProvider) { 
 

 
    $urlRouterProvider.otherwise('/frame/page/thing'); 
 

 
    $stateProvider 
 
     .state('frame', { 
 
     url: '/frame', 
 
     template: ` 
 
      <div ui-view></div> 
 
     `, 
 
     }).state('frame.page', { 
 
     url: '/page', 
 
     template: ` 
 
      <nav> 
 
      <a ui-sref="frame.page.thing" ui-sref-active="active">Things</a> 
 
      <a ui-sref="frame.page.stuff" ui-sref-active="active">Stuff</a> 
 
      </nav> 
 
      <section ui-view="thing"></section> 
 
      <aside ui-view="aside"></aside> 
 
     `, 
 
     }).state('frame.page.thing', { 
 
     url: '/thing', 
 
     views: { 
 
      aside: { 
 
      template: ` 
 
       <h2>Aside</h2> 
 
       Aside for things 
 
      ` 
 
      }, 
 
      thing: { 
 
      template: ` 
 
       <h2>Page things</h2> 
 
      ` 
 
      } 
 
     } 
 
     }) 
 
     .state('frame.page.stuff', { 
 
     url: '/thing', 
 
     views: { 
 
      aside: { 
 
      template: ` 
 
       <h2>Aside</h2> 
 
       Aside for stuff 
 
      ` 
 
      }, 
 
      thing: { 
 
      template: ` 
 
       <h2>Page Stuff</h2> 
 
      ` 
 
      } 
 
     } 
 
     }); 
 
    });

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -ms-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    display: block; 
 
    padding: 10px; 
 
    border: 1px solid gray; 
 
} 
 

 
nav a:hover { 
 
    color: gray; 
 
} 
 

 
nav a.active { 
 
    color: blue; 
 
} 
 

 
nav a { 
 
    color: black; 
 
    padding: 10px; 
 
    font-family: Verdana; 
 
} 
 

 
section, 
 
aside { 
 
    height: 100%; 
 
    display: block; 
 
    float: left; 
 
    border: 1px solid gray; 
 
    padding: 10px; 
 
} 
 

 
aside { 
 
    width: 25%; 
 
} 
 

 
section { 
 
    width: 75%; 
 
}

<div ng-app="app"> 
 
    <div ui-view></div> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>