多个抽象视图不起作用——Ionic

Question

我已经完成了这个项目与离子，其中有多个抽象视图一个里面另一个。但是它不工作，虽然我做的完全像这篇文章

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中必须有一个名为tab-home的ui-view。选项卡。Searcher是TAB的子元素，它有自己的模板，但是它是而不是插入到命名的ui-view中。

我添加了一个片段，我模仿你的状态配置，并做了最小的更改，我认为必须在逻辑上给出的意义(命名ui-视图在模板中，和视图定义在状态对象)。

请看一下，如果还有什么问题，请告诉我。

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-view应该呈现模板。例如:在状态a中设置名为ui-view root的模板。为命名ui-view nav in b

设置模板

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