Mehrere abstrakte Ansichten funktioniert nicht - Ionic

Question

Ich habe dieses Projekt mit ionischen getan, wo es mehrere abstrakte Ansichten eins in einem anderen gibt. Aber es funktioniert nicht, obwohl ich es genau wie 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

Von der tab.home Definition wir, dass in Tab schließen können muss tab-home ui-Ansicht eine benannte sein. tab.searcher ist ein Kind der Registerkarte mit eigener Vorlage, aber es ist nicht eingefügt in der benannten UI-Ansicht.

Ich habe ein Snippet hinzugefügt, wo ich Ihre Statuskonfiguration nachahmen und die minimalen Änderungen vornehmen, von denen ich anschaue, dass sie logisch sinnvoll sind (benannte ui-Ansichten in Vorlagen und Ansichten Definitionen in Zustandsobjekten).

Bitte schauen Sie, und lassen Sie mich wissen, wenn es andere Probleme gibt.

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>

Beachten Sie, dass es auch möglich ist, direkt zu definieren, welche ui-Ansicht mit dem Namen der Vorlage machen sollte. Zum Beispiel: Vorlage für die benannte ui-view root im Zustand a. Set-Vorlage für die benannte ui-Ansicht nav in b

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