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>

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

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

Answer 2

main.html中

<div ng-controller="TabController">
    <uib-tabset>
        <uib-tab ng-repeat="t in tabs"
             heading="{{t.heading}}"
             ui-sref="{{t.route}}"
             ui-sref-active="active">                 
        </uib-tab>
   </uib-tabset>
   <ui-view></ui-view>
</div>

app.controller.js

angular.module('app').controller('TabController', TabController);

TabController.$inject = ['$scope'];

function TabController($scope){
   $scope.tabs = [
    { heading: "Supply", route: ".tab1" },
    { heading: "Demand", route: ".tab2" }
];

}

app.config.js

angular.module("app").config(function($stateProvider) {
$stateProvider
.state('.tab1', {
       url: '/tab1',
       templateUrl: 'tab1.html'
})
.state('.tab2', {
       url: '/tab2',
       templateUrl: 'tab2.html'
})

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

2 个答案: