Question

我正在尝试创建一个选项卡式界面，该界面使用AngularJS，UI路由器和UI路由器附加功能并基于此example来保留状态。

如果我不使用具有抽象状态的嵌套视图（嵌套在'tabs'下），它可以正常工作，但是当我使用嵌套视图时，模板不会加载。我假设我宣布我的观点或状态不正确：

      $stateProvider.state('tabs', { abstract: true,  url: '/tabs', template: '<ui-view ng-transclude/>', transclude: true });
      $stateProvider.state('tabs.tab1', {
        url: '/tab1',
        views: { 'tab1@tabs': { template: '<div>this is tab 1 <input type="text" autocomplete="off"/></div>'}},
        deepStateRedirect: true, sticky: true
      });

<div ui-view="tabs">
  <div ui-view="tab1"></div><div ui-view="tab2"></div>
</div>

Full example at JB Bin（source）。

是否可以声明我的嵌套视图？或者我是否必须将“标签”视图放入外部文件？

Answer 1

这是updated working example

首先，我删除了tabs目标

的内容

<div ui-view="tabs"></div>

并将其移至状态def：

$stateProvider.state('tabs', {
    abstract: true,
    url: '/tabs',
    //template: '<ui-view ng-transclude/>',
    views: {
      'tabs@': {
        template: '<div><div ui-view="tab1"></div><div ui-view="tab2"></div></div>'
      }
    },
    transclude: true
  });

另外，我们可以看到我改变了原文：

$stateProvider
    .state('tabs', { 
        ...
        template: '<ui-view ng-transclude/>'

到上面提到的views : {}定义，因为我们需要定位命名视图 'tabs@' 。检查：

View Names - Relative vs. Absolute Names （引用:)

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

嵌套视图模板未加载

1 个答案: