javascript - 如何从静态 ui-bootstrap 选项卡切换到动态 ui-tabs

Question

我正在尝试将 ui-router 用于我的 ui-bootstrap 选项卡。我正在遵循一个示例，它工作正常。问题是我在 html 中使用静态选项卡。我遵循的示例使用动态选项卡。我需要合并 ng-click 函数和我之前设置中的 id 标签。

这是新设置

 <tabset justified="true">
         <tab ng-repeat="t in tabs"
              heading="{{t.heading}}"
              select="go(t.route)"
              active="t.active">
         </tab>
     </tabset>

 $scope.go = function (route) {
        $state.go(route);
    };

    $scope.active = function (route) {
        return $state.is(route);
    };

    $scope.tabs = [
        { heading: "Supply", route: "main.tab1", active: false },
        { heading: "Demand", route: "main.tab2", active: false },
        //{ heading: "Tab 3", route: "main.tab3", active: false },
    ];

    $scope.$on("$stateChangeSuccess", function () {
        $scope.tabs.forEach(function (tab) {
            tab.active = $scope.active(tab.route);
        });
    });

这是我之前使用的

   <tabset justified="true">
            <tab heading="Supply" ng-click="clearPopupSupply()">
                <div ng-include src="'ViewsSPA/SupplyChart.html'" style="margin-top:-25px"></div>
            </tab>
            <tab heading="Demand" ng-click="clearPopupDemand()" id="bootstrap-tour-position">
                <div ng-include src="'ViewsSPA/DemandChart.html'" style="margin-top:-25px"></div>
            </tab>
        </tabset>

Answer 1

所以 ui-router 有一些指令可以实现您想要实现的目标，特别是 ui-sref 和 ui-sref-active。在您的 html 代码中执行以下操作:

 <tabset justified="true">
     <tab ng-repeat="t in tabs"
          heading="{{t.heading}}"
          ui-sref="t.route"
          ui-sref-active="active">
     </tab>
 </tabset>

现在你的 Angular 只需要对象，因为 ui-router 已经处理了其余的事情

 $scope.tabs = [
    { heading: "Supply", route: "main.tab1" },
    { heading: "Demand", route: "main.tab2" }
];