複数の抽象ビューは機能しません - イオン

Question

私はこのプロジェクトをイオンで行いました。私は、まさに私たちがタブで指定されたtab-home UIビューが存在しなければならないことを推測することができますtab.home定義からthis post

angular_app = angular.module 'starter' 

angular_app.config ($stateProvider,$urlRouterProvider)-> 
    $stateProvider 
    .state 'tab',{ 
    url : '/tab' 
    abstract : true 
    templateUrl : 'templates/tabs.html' 
    } 
    .state 'tab.home',{ 
    url : '/home' 
    views : { 
     'tab-home' : { 
     templateUrl : 'templates/home.html' 
     } 
    } 
    } 
    .state 'tab.searcher',{ 
    url : '/searcher' 
    abstract : true 
    templateUrl : 'templates/template-searcher.html' 
    } 
    .state 'tab.searcher.ingredients',{ 
    url : '/ingredients' 
    views : { 
     'tab-ingredients' : { 
     templateUrl : 'templates/ingredients-searcher.html' 
     } 
    } 
    } 
    return 

Answer 1

のようにそれを行うが、しかし、それは、動作しません。 tab.searcherは独自のテンプレートを持つタブの子ですが、ではなく、という名前のui-viewに挿入されています。

状態の構成を模倣し、論理的に意味をなさない（テンプレートのui-viewsと状態オブジェクトのビュー定義という名前の）最小限の変更を加えたスニペットを追加しました。

他の問題があるかどうかお調べください。

angular.module('TestApp', ['ui.router']) 
 
    .config(function($stateProvider, $urlRouterProvider, $locationProvider) { 
 
    $stateProvider 
 
     .state('tab', { 
 
     url: '/tab', 
 
     abstract: true, 
 
     template: '<div ui-view="tab-home"></div>' 
 
     }) 
 
     .state('tab.home', { 
 
     url: '/home', 
 
     views: { 
 
      'tab-home': {template: 'Tab Home'} 
 
     } 
 
     }) 
 
     .state('tab.searcher', { 
 
     url: '/searcher', 
 
     abstract: true, 
 
     views: { 
 
      'tab-home': { 
 
      template: 'Tab Searcher <div ui-view="tab-ingredients"></div>' 
 
      } 
 
     } 
 
     }) 
 
     .state('tab.searcher.ingredients', { 
 
     url: '/ingredients', 
 
     views: { 
 
      'tab-ingredients': {template: 'Ingredients!'} 
 
     } 
 
     }); 
 

 
    //$urlRouterProvider.otherwise("/tab/home"); 
 
    $urlRouterProvider.otherwise("/tab/searcher/ingredients"); 
 
    //$locationProvider.html5Mode(true); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.js"></script> 
 
<script src="https://unpkg.com/angular-ui-router@0.3.1/release/angular-ui-router.js"></script> 
 

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

直接のUIビューはテンプレートをレンダリングする必要があるという名前を定義することも可能であることに注意してください。 例：指定されたUIビューのルートのテンプレートをのに設定します。名前のUIビューに設定されたテンプレートでNAV B

.state('a.b.c', { 
    // ... 
    views: { 
     'root@a': {template:'Foo'}, 
     'nav@b': {template:'Bar'} 
    } 
})