Question

我用离子完成了这个项目，其中有一个在另一个内部有多个抽象视图。但它不起作用，虽然我这样做完全像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.home定义我们可以推断，在tab中必须有一个名为tab-home ui-view的名称。 tab.searcher是tab的子代，它有自己的模板，但在命名的ui-view中插入了 not 。

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

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

多个抽象视图不起作用 - 离子

1 个答案: