ブートストラップのアコーディオンとタブでアンカーリンクを動作させる方法

Question

私は、角度のブートストラップTabs & Accordionを画面の幅に応じて使い分けています。

ユーザーがURLにアンカーリンクを含むページに移動すると、適切なタブ/アコーディオンが開きます。 example.com/page#statistics

AngularJSコントローラで$routeParams$locationを使用する必要がありますかアンカーリンクを取得して開くタブ/アコーディオンを設定するために使用していますか？ここで

は、私は、角-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マークアップ/ディレクティブで使用する変数を設定して、どのタブ/アコーディオンがアクティブであるかを設定します。 。 。

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

そして、あなたがしてis-open属性を設定する必要がアコーディオンマークアップのために：

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属性を設定する必要があります