帶UI路由器和UI-Bootstrap的角標籤

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 
}); 
}