Angularjs 角度+；ui路由器实现选项卡

在过去的9个小时里，我一直在尝试使用Angular和ui路由器实现带有选项卡的页面

我有以下资料：

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

使用引导，我只需显示所需的模板。
因此，当显示视频选项卡时，url类似于：localhost:8080/users/1#videos。 所以，在我需要将此链接发送给某人之前，这一切都非常有效，因为当我这样做时，“详细信息”选项卡会自动打开。我不能仅仅在div元素上切换类，因为有些选项卡使用ng，如果是这样，jquery不会选择它应该选择的所有html，可能是因为angulars digest cycle（可以用setTimeout来解决，但我试图避免）

有人知道我如何使用ui路由器定义一个支持直接链接的选项卡吗？ 如果能举个例子，我将不胜感激。 注：我需要抽象的父状态

---

ui路由器中的URL是否有“#”符号？

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

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

在您的根模板中，只需添加以下内容

   <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 -->

细节
日志
....

对于abstrat男性url“/tabs”和chols state“/id”，还可以查看我为其他主题制作的选项卡的实现。谢谢，这给了我一个主意。这可能是一个愚蠢的问题，但更改url中的参数将触发页面重新加载，不是吗？不。Angular是SPA，页面只加载一次。它将只加载选项卡的部分内容，并且只加载一次。您在paranet抽象范围中定义的所有$scope都将被记住。你可以在输入中输入文本，然后切换选项卡，你可以看到文本在那里。是的，我也认为这是一个问题，我的想法之一是将一个具有4个视图的状态分为4个状态，但是，老板希望能够在不重新加载页面的情况下手动更改url。因此，最后我还是保持原样，那些“a”标记对元素有a href，带有一些id（例如）和包装的$location.hash（）进入一个函数，并使用watch来检测哈希何时更改，并使用大量ng类来确定应打开哪个选项卡…没有状态它将可用于所有状态它就像一个永远不会更改的主模板。@Marin要检测状态更改，请使用$stateChangeSuccessuccess event。我认为这不符合项目中安排事情的方式。因为，这些选项卡仅在从主菜单导航到的子页面上可用，并且该子页面必须像其他子页面一样定义状态。这有意义吗？好的，那么请定义名为“main”的主状态和视图a，并定义一个模板，该模板将包含您的选项卡和关联的视图，在创建名为“main.XXX”的子状态之后，您将能够通过选项卡更改您的子状态