ui-router子视图没有运行控制器

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'
  });

然后我尝试了在阳光下的所有内容，并设法使用以下内容渲染第二个视图，但是Controller不会在文章视图上运行：

<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',
      }
    }
  });

如何让子视图渲染并使用/ a控制器？甚至没有达到第三级。

Answer 1

应该是这样。

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