Question

我正在尝试ui-router插件的嵌套视图功能，但遇到了我不知道如何解决的问题。显示问题的代码可以在http://jsfiddle.net/3c9h7/1/找到：

  var app = angular.module('myApp', ['ui.router']);

  app.config(function($stateProvider) {
    return $stateProvider.state('root', {
      template: "<div class='top' ui-view='viewA'></div><div class='middle' ui-view='viewB'></div>"
    }).state('root.step1', {
      url: '',
      views: {
        'viewA': {
          template: '<h1>View A</h1>'
        }
      }
    }).state('root.step1.step2', {
      url: '/step2',
      views: {
        'viewB': {
          template: '<h1>View B</h1>'
        }
      }
    });
  });

  app.controller('MainCtrl', [
    '$scope', '$state', function($scope, $state) {
      $state.transitionTo('root.step1.step2');
    }
  ]);

<div ng-app='myApp' ui-view ng-controller='MainCtrl'>
</div>

因此，代码激活＆＃34; root.step1.step2＆＃34;使用$ state.go方法（https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options）进行状态根据ui-router文档：

当应用程序处于特定状态时 - 当状态为时＆＃34;活跃的＆＃34; - 它的所有祖先状态也是隐含活跃的。

所以，我希望＆＃34; root.step1＆＃34;和＆＃34; root＆＃34;将是活跃的，它按预期工作，但＆＃34; viewB＆＃34;在jsfiddle示例中没有填充模板：top viewA（root.step1）没问题，但中间viewB（root.step1.step2）为空。我做错了什么？

Answer 1

文档说：

子状态会将其模板加载到父级的ui视图中。

因此，viewA模板中应该有ui-view='viewB'，因为root.step1.step2的父状态是root.step1。或者viewB应该是root.step1的其中一个视图，并且应该没有root.step1.step2。

Angular-ui ui-router - 使用多个嵌套视图

1 个答案: