Question

我希望用户能够点击“下一步”按钮以跳转到下一个标签。

这是受影响的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处的示例代码（向下滚动到“标签”），但我似乎无法找到我做错的内容。

Answer 1

我能够弄清楚出了什么问题，虽然我不明白为什么。如果您使用$scope变量作为active的值，则只检测表达式的更改一次。

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

AngularJS＆amp; BootstrapUI：按钮切换按钮只能工作一次

1 个答案: