Angular-ui ui-router - 使用多个嵌套视图 [英] Angular-ui ui-router - using multiple nested views

问题描述

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

 var app = angular.module('myApp', ['ui.router']);app.config(function($stateProvider) {返回 $stateProvider.state('root', {模板:<div class='top' ui-view='viewA'></div><div class='middle' ui-view='viewB'></div>"}).state('root.step1', {网址:'',意见:{'视图A':{模板:'<h1>视图A</h1>'}}}).state('root.step1.step2', {网址:'/step2'，意见:{'视图B':{模板:'<h1>视图B</h1>'}}});});app.controller('MainCtrl', ['$scope', '$state', function($scope, $state) {$state.transitionTo('root.step1.step2');}]);<div ng-app='myApp' ui-view ng-controller='MainCtrl'>

因此，代码通过使用 $state.go 方法(https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options)根据 ui-router 文档:

<块引用>

当应用程序处于特定状态时——当一个状态处于active"——它的所有祖先状态也是隐式激活的.

因此，我希望root.step1"和root"将处于活动状态并且按预期工作，但是viewB"没有填充模板，正如您在 jsfiddle 示例中看到的那样:顶部 viewA(root.step1) 是可以的，但是中间的viewB(root.step1.step2) 是空的.我做错了什么?

解决方案

文档说:

<块引用>

子状态会将其模板加载到其父级的 ui-view 中.

所以在 viewA 模板中应该有一个 ui-view='viewB'，因为 root.step1.step2 的父状态是 root.第一步.或者viewB应该是root.step1的view之一，不应该有root.step1.step2.

I am trying out the nested views feature of ui-router plugin, but faced the issue I don't know how to solve. The code that shows the problem can be found at 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>

So, the code activates "root.step1.step2" state by using $state.go method(https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options) According to ui-router documentation:

When the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well.

So, I expect that "root.step1" and "root" will be active and it works as expected, but "viewB" is not filled with the template as you can see in jsfiddle sample : the top viewA(root.step1) is OK, but the middle viewB(root.step1.step2) is empty. What I am doing wrong?

解决方案

The documentation says:

Child states will load their templates into their parent's ui-view.

So there should be a ui-view='viewB' inside the viewA template, since the parent state of root.step1.step2 is root.step1. Or the viewB should be one of the views of root.step1, and there should be no root.step1.step2.

这篇关于Angular-ui ui-router - 使用多个嵌套视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！