@H_
502_0@前段时间在项目中用了一个蛮好玩的angular-ui-router组件这里推荐一下,
@H_
502_0@angular-ui-router-tabs,下面是git地址
@H_
502_0@
https://github.com/rpocklin/ui-router-tabs
@H_
502_0@下面介绍一下怎么用,个人感觉还是蛮骚的
@H_
502_0@1.当然是把它down到你的angular项目中喽,
bower install angular-ui-router-tabs --save
@H_
502_0@2.然后不要忘了把它加到你的angular项目模块中,还有要引入
文件哦
angular.module('myApp',['ui.router.tabs']);
<script src="bower_components/angular-ui-router-tabs/src/ui-router-tabs.js"></script>
@H_
502_0@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'
});
@H_
502_0@4.在主控制器中,也就是UserCtrl控制器中,记得
加上标签组
$scope.tabData = [
{
heading: 'Settings',route: 'user.settings'
},{
heading: 'Accounts',route: 'user.accounts',disable: true
}
];
@H_
502_0@当然,也可以在这个上面
加上参数路由,比如这样
{
heading: 'Accounts',params: {
accountId: account.id
},options: {}
}
@H_
502_0@5.然后就是在
页面上写
标签啦,
<div ng-controller="UserCtrl">
<tabs data="tabData" type="tabs"></tabs>
</div>
@H_
502_0@很骚,推荐使用哦,记得网上有个在线案例的,一下找不到了,
@H_
502_0@好困,都11点半了,睡觉了.....