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

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

angularjs

Angularjs 如何让锚链接在引导手风琴和标签上工作,angularjs,angular-ui-bootstrap,Angularjs,Angular Ui Bootstrap,我已经成功地设置了angular ui引导&根据屏幕的宽度使用一个或另一个我希望这样，当用户进入URL中带有锚链接的页面时，它将打开相应的选项卡/手风琴，例如example.com/page#statistics 也许我需要在AngularJS控制器中使用$routeParams$location，以获取锚定链接并设置要打开的选项卡/手风琴以下是我在angular ui引导指令中使用的标记： <div window-size class="col-xs-12"> <

我已经成功地设置了angular ui引导&根据屏幕的宽度使用一个或另一个

我希望这样，当用户进入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>


统计内容
统计内容
实时更新内容

使用我提出的解决方案，

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

然后，在标签的标记中，您需要使用以下选项设置

活动属性：
<uib-tabset active="mainCtrl.activeTab">



对于手风琴标记，您需要使用以下选项设置是打开的属性：
使用我提出的解决方案，$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';
    }
}]);

然后，在标签的标记中，您需要使用以下选项设置活动属性：
<uib-tabset active="mainCtrl.activeTab">



对于手风琴标记，您需要使用以下选项设置是打开的属性：