angular ui router tabs 挺实用的一个标签路由组件

前段时间在项目中用了一个蛮好玩的angular-ui-router组件这里推荐一下,

angular-ui-router-tabs,下面是git地址

https://github.com/rpocklin/ui-router-tabs

下面介绍一下怎么用,个人感觉还是蛮骚的

1.当然是把它down到你的angular项目中喽,

bower install angular-ui-router-tabs --save

2.然后不要忘了把它加到你的angular项目模块中,还有要引入文件哦

angular.module('myApp',['ui.router.tabs']);

<script src="bower_components/angular-ui-router-tabs/src/ui-router-tabs.js"></script>

3.然后在入口文件的路由配置中,要这么写

$stateProvider.state('user',{
      url:         '',controller: 'UserCtrl',templateUrl: 'example.html'
    }).state('user.settings',{
      url:         '/user/settings',templateUrl: 'user/settings.html'
    }).state('user.accounts',{
      url:         '/user/accounts',templateUrl: 'user/accounts.html'
    });

4.在主控制器中,也就是UserCtrl控制器中,记得加上标签组

$scope.tabData   = [
      {
        heading: 'Settings',route:   'user.settings'
      },{
        heading: 'Accounts',route:   'user.accounts',disable: true
      }
    ];

当然,也可以在这个上面加上参数路由,比如这样

{
      heading: 'Accounts',params:  {
                 accountId: account.id
               },options: {}
    }

5.然后就是在页面上写标签啦,

<div ng-controller="UserCtrl">
 <tabs data="tabData" type="tabs"></tabs>
</div>

很骚,推荐使用哦,记得网上有个在线案例的,一下找不到了,

好困,都11点半了,睡觉了.....

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!