UI 路由器子视图未运行控制器

Question

试图让以下网址结构工作：

/page/
/page/article
/page/article/third-level-1
/page/article/third-level-2

我尝试了以下内容，但它根本没有呈现文章视图。页面视图呈现正常：

<section ui-view></section>
$stateProvider
  .state('index', {
    external: true,
    url: '/'
  })
  .state('page', {
    url: '/page',
    controller: Controller,
    controllerAs: 'ctrl',
    templateUrl: '/static/views/page/page.html',
  })
  .state('page.article', {
    url: '/article/',
    controller: Controller,
    controllerAs: 'ctrl',
    templateUrl: '/static/views/page/page-article.html'
  });

然后，我在阳光下尝试了所有内容，并设法使用以下内容呈现第二个视图，但是控制器无法在文章视图上运行：

<section ui-view="app"></section>
$stateProvider
  .state('index', {
    external: true,
    url: '/'
  })
  .state('page', {
    url: '/page',
    views: {
      'app': {
        controller: Controller,
        controllerAs: 'ctrl',
        templateUrl: '/static/views/page/page.html',
      }
    }
  })
  .state('page.article', {
    url: '/article/',
    views: {
      'app@': {
        controller: Controller,
        controllerAs: 'ctrl',
        templateUrl: '/static/views/page/page-article.html',
      }
    }
  });

如何让子视图呈现和使用控制器？甚至还没有下到第三层。

Answer 1

应该是

这个。

.state('page.article', {
url: '/page/article/',
views: {
  'app@': {
    controller: Controller,
    controllerAs: 'ctrl',
    templateUrl: '/static/views/page/page-article.html',
  }
}