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

Question

我用 ionic 完成了这个项目，其中有多个抽象视图一个内嵌另一个。但它不起作用，虽然我完全像

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.home定义中我们可以推断，在选项卡中必须有一个命名为tab-home ui-视图。 tab.searcher 是具有自己模板的选项卡的子项，但它未插入到命名的 ui-视图中。

我添加了一个片段，我在其中模仿您的状态配置并进行最小的更改，我认为必须在逻辑上给出这些更改才有意义（在模板中命名为 ui-views，在状态对象中命名为 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-view 应该呈现模板。例如：在状态 a 中为名为 ui-view root 设置模板。在 b

中设置名为 ui-view nav 的模板

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

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

Multiple abstract views does not work - Ionic

coffeescript

angularjs

angular-ui-router

ionic-framework