带有 UI-Router 和 UI-Bootstrap 的 Angular 选项卡答案

【问题标题】：Angular tabs with UI-Router & UI-Bootstrap带有 UI-Router 和 UI-Bootstrap 的 Angular 选项卡
【发布时间】：2017-04-24 20:13:02
【问题描述】：

我是 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'
        }
    }
})

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

【问题讨论】：

我希望我的 uib-tab 将我带到那个状态，ui-sref 就是一个例子。理想情况下，选项卡会触发 ui-sref，但选项卡语法上没有属性可以这样做。

标签： angularjs angular-ui-router angular-ui-bootstrap

【解决方案1】：

您可以在ui-tab 中添加uib-tab-heading 指令，其中提到a(anchor) 标记和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>

【讨论】：

@RandomUs1r 很高兴为您提供帮助，谢谢 :)
我可能说得太早了，似乎以这种方式嵌入链接不会触发活动事件，所以链接是可点击的，但它不会循环活动类所以我可以更新我的样式，有什么想法吗？
取消选中此作为已接受的答案，它不适用于底层技术，因为单击此格式的链接不会更改选项卡上的活动类。
@RandomUs1r 你能添加有问题的 plunker 吗？
当然，plnkr.co/edit/NnRDHENE7atIDj7dvoQr?p=preview 之前从未做过 plunkr，所以请原谅缺乏高级技术，基本上我在活动选项卡上突出显示了背景以显示问题。点击链接，选项卡改变，但活动不，点击角落，活动改变，但选项卡没有。

【解决方案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
});
}

【讨论】：