如何让锚链接在引导手风琴和标签上工作

Question

我已成功设置 angular-ui bootstrap Tabs 和 Accordion 以根据屏幕宽度使用其中一个。

我希望这样当用户访问 URL 中带有锚链接的页面时，它会打开相应的选项卡/手风琴，例如example.com/page#statistics

也许我需要在我正在使用的 AngularJS 控制器中使用 $routeParams $location 来获取锚链接并设置打开哪个选项卡/手风琴？

这是我与 angular-ui 引导指令一起使用的标记：

<div window-size class="col-xs-12">
    <uib-tabset active="active" ng-if="windowWidth >= 768">
        <uib-tab index="0" heading="overview">
            <div ng-include="'app/partials/overview.html'"></div>
        </uib-tab>
        <uib-tab index="1" heading="statistics">
            <div ng-include="'app/partials/statistics.html'"></div>
        </uib-tab>
        <uib-tab index="2" heading="live updates">
            <div ng-include="'app/partials/live-updates.html'"></div>
        </uib-tab>
    </uib-tabset>
    <uib-accordion close-others="true" ng-if="windowWidth < 768">
        <div uib-accordion-group class="panel-default" heading="overview" is-open="true">
            <div ng-include="'app/partials/overview.html'"></div>
        </div>
        <div uib-accordion-group class="panel-default" heading="statistics">
            <div ng-include="'app/partials/statistics.html'"></div>
        </div>
        <div uib-accordion-group class="panel-default" heading="updates">
            <div ng-include="'app/partials/live-updates.html'"></div>
        </div>
    </uib-accordion>
</div>

这里是标签的标记输出到浏览器：

<div active="active" ng-if="windowWidth >= 768" class="ng-scope ng-isolate-scope">
    <ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
        <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope active" index="0" heading="overview">
            <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">overview</a>
        </li>
        <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" index="1" heading="statistics">
            <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">statistics</a>
        </li>
        <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" index="2" heading="live updates">
            <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">live updates</a>
        </li>
    </ul>
    <div class="tab-content">
        <!-- ngRepeat: tab in tabset.tabs -->
        <div class="tab-pane ng-scope active" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
            <!-- ngInclude: 'app/partials/overview.html' -->
            <div ng-include="'app/partials/overview.html'" class="ng-scope"><h3 class="ng-scope">overview content</h3></div>
        </div>
        <!-- end ngRepeat: tab in tabset.tabs -->
        <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">
            <!-- ngInclude: 'app/partials/statistics.html' -->
            <div ng-include="'app/partials/statistics.html'" class="ng-scope"><h3 class="ng-scope">statistics content</h3></div>
        </div>
        <!-- end ngRepeat: tab in tabset.tabs -->
        <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab">    
            <!-- ngInclude: 'app/partials/live-updates.html' -->
            <div ng-include="'app/partials/live-updates.html'" class="ng-scope"><h3 class="ng-scope">updates content</h3></div>
        </div>
        <!-- end ngRepeat: tab in tabset.tabs -->
  </div>
</div>

输出到浏览器的手风琴标记是：

<uib-accordion close-others="true" ng-if="windowWidth < 768" class="ng-scope">
    <div role="tablist" class="panel-group" ng-transclude="">
        <div uib-accordion-group="" class="panel-default ng-scope ng-isolate-scope panel panel-open" heading="overview" is-open="true">
            <div role="tab" id="accordiongroup-198-2711-tab" aria-selected="true" class="panel-heading" ng-keypress="toggleOpen($event)">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" href="" aria-expanded="true" aria-controls="accordiongroup-198-2711-panel" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle=""><span uib-accordion-header="" ng-class="{'text-muted': isDisabled}" class="ng-binding">overview</span></a>
                </h4>
            </div>
            <div id="accordiongroup-198-2711-panel" aria-labelledby="accordiongroup-198-2711-tab" aria-hidden="false" role="tabpanel" class="panel-collapse collapse in" uib-collapse="!isOpen" aria-expanded="true">
                <div class="panel-body" ng-transclude="">
                    <!-- ngInclude: 'app/partials/overview.html' -->
                    <div ng-include="'app/partials/overview.html'" class="ng-scope"><h3 class="ng-scope">statistics content</h3></div>
                </div>
            </div>
        </div>
        <div uib-accordion-group="" class="panel-default ng-scope ng-isolate-scope panel" heading="statistics">
            <div role="tab" id="accordiongroup-200-2865-tab" aria-selected="false" class="panel-heading" ng-keypress="toggleOpen($event)">
                    <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" href="" aria-expanded="false" aria-controls="accordiongroup-200-2865-panel" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle=""><span uib-accordion-header="" ng-class="{'text-muted': isDisabled}" class="ng-binding">statistics</span></a>
                    </h4>
            </div>
            <div id="accordiongroup-200-2865-panel" aria-labelledby="accordiongroup-200-2865-tab" aria-hidden="true" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen" aria-expanded="false" style="height: 0px;">
                <div class="panel-body" ng-transclude="">
                    <!-- ngInclude: 'app/partials/statistics.html' -->
                    <div ng-include="'app/partials/statistics.html'" class="ng-scope"><h3 class="ng-scope">statistics content</h3></div>
                </div>
            </div>
        </div>
        <div uib-accordion-group="" class="panel-default ng-scope ng-isolate-scope panel" heading="live updates">   <div role="tab" id="accordiongroup-202-497-tab" aria-selected="false" class="panel-heading" ng-keypress="toggleOpen($event)">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" href="" aria-expanded="false" aria-controls="accordiongroup-202-497-panel" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle=""><span uib-accordion-header="" ng-class="{'text-muted': isDisabled}" class="ng-binding">live updates</span></a>
                </h4>
            </div>
            <div id="accordiongroup-202-497-panel" aria-labelledby="accordiongroup-202-497-tab" aria-hidden="true" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen" aria-expanded="false" style="height: 0px;">
                    <div class="panel-body" ng-transclude="">
                    <!-- ngInclude: 'app/partials/live-updates.html' -->
                    <div ng-include="'app/partials/live-updates.html'" class="ng-scope"><h3 class="ng-scope">live updates content</h3></div>
                </div>
            </div>
        </div>
    </div>
</uib-accordion>

Answer 1

通过我提出的解决方案，需要将$location 服务添加到您的控制器中，以便您可以获取锚链接参数。

然后在控制器中添加一些逻辑来获取锚链接并设置要在 angularJS 标记/指令中使用的变量以设置哪个选项卡/手风琴处于活动状态。 . .

app.controller('mainController', ['$location', function ($location) {
    var mainCtrl = this;
    mainCtrl.anchorLink = $location.$$url.split('#')[1];

    mainCtrl.activeAccordion = {
        isOverview: true,
        isStatistics: false,
        isUpdates: false
    };
    function setActiveAccordion(activeKey) {
        for(var key in mainCtrl.activeAccordion) {
            mainCtrl.activeAccordion[key] = false;
        }
        mainCtrl.activeAccordion[activeKey] = true;
    }
    switch(mainCtrl.anchorLink) {
        case 'statistics':
            mainCtrl.activeTab = 1;
            setActiveAccordion('isStatistics');
            break;
        case 'live-updates':
            mainCtrl.activeTab = 2;
            setActiveAccordion('isUpdates');           
            break;
        default:
            mainCtrl.activeTab = 0;
            setActiveAccordion('isOverview');
            mainCtrl.anchorLink = 'overview';
    }
}]);

然后在标签的标记中，您需要设置active 属性：

<uib-tabset active="mainCtrl.activeTab">

对于手风琴标记，您需要设置 is-open 属性：