Angular + ui-router 实现选项卡

Question

在过去的 9 个小时里，我一直在尝试使用 Angular 和 ui-router 实现一个带有标签的页面。

我有以下：

.state('someAbstractParentRoot', {
            'abstract': true,
            url: '/{id}',
            templateUrl: '/admin/templates/rootTemplate',
            controller: 'someController1',
            data: {
                breadcrumbLabel: 'Details'
            }
        })
        .state(someAbstractParentRoot.child, {
            url: '',
            views: {
                details: {
                    templateUrl: '/admin/templates/details',
                    controller: 'someController2'
                },
                videos: {
                    templateUrl: '/admin/templates/videos',
                    controller: 'someController3'
                },
                logs: {
                    templateUrl: '/admin/templates/logs',
                    controller: 'someController4',
                },
                notes: {
                    templateUrl: '/admin/templates/notes',
                    controller: 'someController5'
                }
            }
        })

使用引导程序，我只需显示我需要的模板。
因此，当显示视频选项卡时，网址类似于：localhost:8080/users/1#videos。 所以，这一切都很好，直到我需要将此链接发送给某人，因为当我这样做时，详细信息选项卡会自动打开。我不能只在 div 元素上切换类，因为一些选项卡正在使用 ng-if，所以 jquery 没有拾取它应该获取的所有 html，可能是因为 angulars 摘要循环（它可以用 setTimeout 解决，但我我试图避免这种情况）。

有谁知道我如何使用 ui-router 来定义一个支持直接链接的选项卡？ 一些例子将不胜感激。 注意：我需要抽象的父状态。

ui-router中的url可以有'#'符号吗？

Answer 1

你的状态有问题 实际上你只声明一个状态，它可以分成几个部分你必须为每个子视图声明一个状态，所以声明类似的东西。我不知道你是否真的需要一个抽象状态，所以我可以声明：

    $stateProvider.state('details', {
        templateUrl: '/admin/templates/details',
        controller: 'someController2'
    })
    .state('videos', {
         templateUrl: '/admin/templates/details.html',
         controller: 'someController3'
    })
    .state('logs', {
         templateUrl: '/admin/templates/logs.html',
         controller: 'someController4'
    })            
    .state('notes', {
         templateUrl: '/admin/templates/notes.html',
         controller: 'someController5'
    });

在你的 rootTemplate 中添加这个

   <div id="tabsContainer">
       <a ui-sref="details">Details</a>
       <a ui-sref="logs">Logs</a>
      ....
   </div>

   <div ui-view> </div> <!-- Where your state template will be inserted -->