Question

是否可以使用UI-Router？

在子状态中使用父子状态关系定义多个视图

我的配置中有以下代码

$urlRouterProvider.otherwise("/child");

$stateProvider
  .state('parent', {
    abstract: true,
    views: {
      'parent': {
        templateUrl: "parent.html",
        controller: "parentCtrl as parentCtrl"
      },
    }
  })
  .state('parent.child', {
    url: '/child',
    views: {
      'state1@parent.child': {
        templateUrl: "child.html",
        controller: "childCtrl as childCtrl"
      },

    }
  });

我确认我的parent.html正在显示，但我的child.html不是

如果我将child.html移动到父视图对象，如

$stateProvider
  .state('parent', {
    abstract: true,
    views: {
      'parent': {
        templateUrl: "parent.html",
        controller: "parentCtrl as parentCtrl"
      },
      'state1@parent.child': {
        templateUrl: "child.html",
        controller: "childCtrl as childCtrl"
      },
    }
  })

比child.html更有效。

我在我的console.log($state.$current.name);中使用parentCtrl验证我当前状态为parent.child。

有人可以给我一些提示吗？

由于

Answer 1

有a working plunker

我调整了您的状态，主要是孩子 a ，就像这样

views : {}

构造'... @ parent.child'是错误的，因为它是一个绝对的命名...试图说，我们在'parent.child'中搜索ui-view =“...” '状态。事实并非如此。

所以，让我们把它放到索引中：

$stateProvider
  .state('parent', {
    abstract: true,
    views: {
      'parent': {
        templateUrl: "parent.html",
        controller: "parentCtrl as parentCtrl"
      },
    }
  })
  .state('parent.child', {
    url: '/child',
    views: {
      //'state1@parent.child': {
      'view1@parent': {
        templateUrl: "child.html",
        controller: "childCtrl as childCtrl"
      },
      // the same as view2@parent
      'view2': {
        templateUrl: "child.html",
        controller: "childCtrl as childCtrl"
      },
      'view3@': {
        templateUrl: "child.html",
        controller: "childCtrl as childCtrl"
      },
    }

父模板可能就像这样

// place for parent
<div ui-view="parent"></div>
// place for child view number 3
place in index for  view 3   
<div ui-view="view3"></div>

然后上面的状态def将使用绝对命名来定位view1，对于view3来说是相同的 - 在index.html中; view2将转到具有相对名称的父级

检查here

如何使用UI路由器定义具有父子状态的多个视图？

1 个答案: