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

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

有谁知道如何使用ui-router定义一个支持直接链接的标签？一些例子将非常感谢。注意：我需要抽象的父状态。

ui-router中的网址是否有“＃”符号？

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 juste中添加这个

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

Angular + ui-router实现标签

1 个答案: