AngularJS & BootstrapUI：通过按钮切换选项卡只能使用一次

Question

我希望用户能够单击 "next" 按钮以跳转到下一个选项卡。

这是受影响的HTML（我实际上已经剥离了所有内容并进行了测试，但它仍然只能工作一次）：

<body>
    <div class="container" id="container">
        <form name="orderBrochures" novalidate>
            <div ng-controller="TabController as tabCtrl">
                <tabset justified="true">
                    <tab heading="Prospektauswahl" class="tabHeading" ng-controller="OptionController as optionCtrl" active="optionsTab">


                        <div class="row">
                            <div class="col-md-12 col-xs-12 col-sm-12">
                                <button class="btn btn-default btn-block" ng-click="next()">Weiter</button>
                            </div>
                        </div>

                        <br>
                    </tab>

                    <tab heading="Pers&ouml;nliche Angaben" class="tabHeading" active="personDetailsTab" id="personDetailsTab">

                    </tab>
                </tabset>
            </div>

        </form>
    </div>
</body>

这是相关的 TabController:

(function() {
    var app = angular.module('orderBrochures', ['ui.bootstrap']);

    app.controller('TabController', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {
        $scope.next = function() {
            $scope.personDetailsTab = true;

            $location.hash('personDetailsTab');
            $anchorScroll();
        }
    }]);
})();

我第一次点击按钮时一切正常。第二次单击它只会滚动，不会更改选项卡。

我已经检查了 Bootstrap 中的示例代码（向下滚动到 "Tabs"），但我似乎找不到我做错了什么。

Answer 1

虽然我不明白为什么，但我能够找出问题所在。如果您使用 $scope 变量作为 active 的值，它只会检测一次表达式的变化。

但是，如果我使用控制器的属性（如 tabCtrl.personDetailsTab），它每次都会检测到值的变化。

AngularJS & BootstrapUI：通过按钮切换选项卡只能使用一次

AngularJS & BootstrapUI: Switch tab by button only works once

angularjs

angular-ui-bootstrap