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

您可以在uib-tab-heading内添加ui-tab指令，在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
});
}

UI-Router＆amp; amp; Angular标签UI的引导

2 个答案: