带有UI-Router和UI-Bootstrap的Angular tabs

Question

我是Angular的新手，并且正在尝试制作一个选项卡控件，该控件将加载每个选项卡的状态(动态(。

我的标签代码：

 <uib-tabset>
        <uib-tab index="$index + 1" ng-repeat="tab in tabData" heading="{{tab.heading}}" disable="tab.disabled">
            <a ui-sref="{{tab.route}}">Click me</a>  
        </uib-tab>
    </uib-tabset>

我要注入的东西：

$scope.tabData = [
 {
     heading: 'Companies',
     route: 'LandingTemplate.Company',
     disabled: false
 },
 {
     heading: 'Users',
     route: 'LandingTemplate.Users',
     disabled: false
 },
 {
     heading: 'Clients',
     route: 'LandingTemplate.Clients',
     disabled: true
 }
];

样本路线：

.state('LandingTemplate.Company',
{
    url: '/company',
    views: {
        'container@': {
            templateUrl: 'App/Views/Admin.html'
        },
        'tabs-views@': {
            templateUrl: 'App/Views/Company.html'
        }
    }
})

当前的有线方式是您单击一个选项卡，单击链接，这将呈现您的视图。我想单击标签。任何帮助将不胜感激。

Answer 1

您可以在ui-tab中添加uib-tab-heading指令，在此提及的a(锚(标记ui-sref，并将选项卡内容保持为空。这将使您的选项卡如锚定标签，这将帮助您重定向到其他状态。

<uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabData" disable="tab.disabled">
      <uib-tab-heading>
         <a ui-sref="{{tab.route}}">Click me</a>  
      </uib-tab-heading>
    </uib-tab>
</uib-tabset>

Answer 2

这个答案与@pankaj Parkar

非常相似

<div ng-app="demoApp" ng-controller="mainController">
<div ui-view></div>
<script type="text/ng-template" id="tabs.html">
    <uib-tabset active="active">
        <uib-tab index="$index" ng-repeat="tab in tabs" ng-click="go(tab)">
            <uib-tab-heading> <a ui-sref="{{tab.name}}">{{tab.name}}</a>  </uib-tab-heading>
            <div ui-view></div>
        </uib-tab>
    </uib-tabset>
</script>

angular.module('demoApp', ['ui.router', 'ui.bootstrap', 'ui.router.stateHelper'])
.run(['$state', '$rootScope', 'TABS_CONFIG', function($state, $rootScope, TABS_CONFIG) {
    // run needed to set the correct tab-index on load
    var tabs = TABS_CONFIG.children;
    $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
         console.log ('$stateChangeStart')
        angular.forEach(tabs, function(item, index) {
            if (item.name == toState.name) {
                $rootScope.active = index;
                    console.log ($rootScope.active)
            }
                console.log (index)
        });
    });
}])
.constant('TABS_CONFIG', {
    name: 'tabs',
    templateUrl: 'tabs.html',
    abstract: true,
    children: [{
            url: '/about',
            name: 'about',
            template: '<div class="container"><h1>about</h1></div>'
                //templateUrl: 'about.html'
        }, {
            url: '/contact',
            name: 'contact',
            template: '<div class="container"><h1>contact</h1></div>'
                //templateUrl: 'contact.html'
        }, {
            url: '/knowhow',
            name: 'know-how',
            template: '<div class="container"><h1>knowhow</h1></div>'
                //templateUrl: 'knowhow.html'
        },
    ]
})
.controller('mainController', function($scope, $state, TABS_CONFIG) {
    $scope.tabs = TABS_CONFIG.children;
    $scope.go = function(tab) {
    console.log ('go')
        //$scope.active = $scope.tabs.indexOf(tab);
        $state.go(tab.name);
    };
})
.config(routes);
function routes($urlRouterProvider, stateHelperProvider, TABS_CONFIG) {
$urlRouterProvider.otherwise('/contact');
stateHelperProvider.state(TABS_CONFIG, {
    keepOriginalNames: true
});
}