Angular Bootstrap选项卡,通过控制器初始化选项卡

时间:2015-12-03 19:20:32

标签: angularjs tabs

我无法获得除第一个之外的角度选项卡在加载时处于活动状态。我正在传递一个url参数,例如?location = Tucson来做出这个决定。我希望第二个选项卡在加载时显示为活动状态。奇怪的是,第一个选项卡被自动设置为活动,也许这是默认情况。 我在用  *棱角带  * @version v2.1.4 - 2014-11-26

如何通过控制器将第二个标签设置为活动状态? 这是我的设置

<section class="mainbar" data-ng-controller="contactus as vm">
    <div>  
        <tabset>
            <tab class="tab-pane" id="Tampa" heading="Tampa">
                <tab-heading>Tampa</tab-heading>
                <div class="actionBtn">
                    <a id="tpabtn" class="btn btn-default ldbtn request" data-ng-click="vm.getcontactformF()">
                        <div><span class="glyphicon glyphicon-envelope"></span></div>
                        <div>
                            <div class="title">Have Questions?</div>
                            <div>Send us a message</div>
                        </div>
                    </a>
                </div>
            </tab>
            <tab class="tab-pane" id="Tucson" active="active">
                <tab-heading>Tucson</tab-heading>
                 <div class="actionBtn">
                    <a href="tel:8885210206" class="btn btn-default ldbtn">
                        <div><span class="glyphicon glyphicon-earphone"></span></div>
                        <div>
                            <div class="title">RV Service</div>
                            <div class="phone">888.521.0206</div>
                        </div>
                    </a>
                </div>
            </tab>
        </tabset>
    </div>
    <script type="text/ng-template" id="_contactfservice.html">
        <div data-ng-include data-src="'/app/form/contactusform.html'"></div>
    </script>
</section>

JS

(function () {
    'use strict';
    var controllerId = "contactus";

    angular
        .module('app')
         .controller(controllerId, ['$location', '$window', '$rootScope', '$scope', '$sce', '$q', 'common', 'config', 'bootstrap.dialog', 'datacontext', contactus]);


    function contactus($location, $window, $rootScope, $scope, $sce, $q, common, config, bsDialog, datacontext) {
        /* jshint validthis:true */
        var vm = this;

        vm.highlightLocation = highlightLocation;

        activate();

        function activate() {
            common.activateController([getLocationHours()], controllerId).then(function () {
                    common.postLoad();
                    log('Activated contact us View test test');
                    $window.ga('send', 'event', $location.path(), 'form-viewed');
                    highlightLocation();
                });
        }


        function highlightLocation() {
            var location = common.getQueryStringParameter('location', document.location.href);
            console.log(location);

            if (location == "Tucson") {
               $scope.tabs = [{active: false}, {active: true}];
            }

        }


    }
})();

1 个答案:

答案 0 :(得分:0)

bootstrap ui的一些奇怪的问题,这是有效的。

$scope.data = {};
                $timeout(function () {
                    $scope.vm.data.static2 = true;
                }, 0)