我已经成功设置了angular-ui bootstrap Tabs＆amp; Accordion使用一个或另一个取决于屏幕的宽度。
我希望这样当用户进入带有URL链接的页面时，它将打开相应的标签/手风琴，例如example.com/page#statistics
也许我需要在AngularJS控制器中使用$routeParams $location来获取锚链接并设置打开哪个标签/手风琴？
这是Markup我使用angular-ui bootstrap指令：
<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>
答案 0 :(得分：0)
通过我提出的解决方案我需要将$location服务添加到您的控制器中，以便您可以获得锚链接参数。
在控制器中，然后添加一些逻辑以获取锚链接并设置要在angularJS标记/指令中使用的变量以设置哪个tab / accordion处于活动状态。 。
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属性：