Question

我声明了以下状态：

.state('select', {
    url: '/select/:youtubeId',
    views: {
        '': {templateUrl: 'partials/select/select.html'},
        video: {
            templateUrl: 'partials/select/select.video.html',
            controller: 'RecordVideoController'
        },
        setParts: {
            templateUrl: 'partials/select/select.set-parts.html',
            controller: 'RecordPartsController'
        },
        listParts: {
            templateUrl: 'partials/select/select.list-parts.html',
            controller: 'RecordPartsController'
        }
    }
})

存在所有模板文件，例如，partials/select/select.html：

<div>
  <div class="row">
    <div ui-view="video" class="col-sm-9"></div>
    <div class="col-md-3 text-center">
      <div class="row">
        <div ng-class="{'col-md-12': parts.length == 0, 'col-md-6': parts.length !== 0}" ui-view="setParts"></div>
        <div ng-show="parts.length" ui-view="listParts" class="col-md-6"></div>
      </div>
    </div>
  </div>
  <div ui-view="ui-view"></div>
</div>

因此，可以看出它只定义布局以设置正确的状态视图。

他们的问题是没有其他视图被渲染，也没有实例化相应的控制器。

它应该如何运作？

Answer 1

我认为你没有正确地嵌套你的观点。自从我使用ui-router以来已经有一段时间了，但我认为你的嵌套状态看起来应该是这样的 video@select: { templateUrl: 'partials/select/select.video.html', controller: 'RecordVideoController' },

另外，我不确定您要对<div ui-view="ui-view"></div>行做些什么 - 如果您尝试在那里渲染默认视图，我认为可能只是<div ui-view></div>，或者你需要像上面那样指定你想要的视图。

Answer 2

你可以提供总代码，然后我可以检查你声明的状态是否正确我也认为你没有正确使用嵌套状态 [在此输入链接说明] [1]查看以下链接

Angular ui router multiple named views for all states

 .state('select', {
  url: '/select/:youtubeId',
  views: {
    '': {templateUrl: 'partials/select/select.html'},
    //viewName@stateName
    'video@select': {
        templateUrl: 'partials/select/select.video.html',
        controller: 'RecordVideoController'
    },
    'setParts@select': {
        templateUrl: 'partials/select/select.set-parts.html',
        controller: 'RecordPartsController'
    },
    'listParts@select': {
        templateUrl: 'partials/select/select.list-parts.html',
        controller: 'RecordPartsController'
    }
  }
})

试试这个..

没有显示多个视图的Angular ui-router

2 个答案: