大佬教程收集整理的这篇文章主要介绍了angularjs – 在侧面菜单页面上使用Ionic选项卡，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
.state('app',{
url: '/app',abstract: true,templateUrl: "templates/menu.html",controller: "appController"
})
并将其加载到
<body>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
...
侧面菜单页面加载了父级(app.pageOne,app.pageTwo等)
登录和注册页面在根目录下加载,因此不需要包含侧面菜单(登录,注册等)
我创建了一个标签模板,用于侧边菜单页面,其中包含标签的另一个基本状态
.state('app.tabs',{
url: '/tab',views: {
'menuContent' :{
templateUrl: "templates/tabs.html"
}
}
})
并在侧面菜单视图中加载
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
现在,如果我有一个页面’app.pageOne’并导航到’app.pageTwo’,幻灯片动画将按预期工作.
但是,如果我在标签页’app.tabs.home’并点击链接转到’app.pageTwo’,导航栏不会更新,也不会有任何动画过渡.
我知道它看起来像是一个父母的孩子问题,但我无法解决它,任何想法？
国家如下,例如
login
register
app ____page1
|____page2
|____Tabs
|____Home
|____Contact etc
page1动画到page2工作正常
page2的主页没有动画(它只是直接加载)
希望更有意义.
HTML
<html ng-app="ionicApp">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
</head>
<body>
<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view></ion-nav-view>
<script id="entry.html" type="text/ng-template">
<ion-nav-bar animation="nav-title-slide-ios7"
type="bar-positive"
BACk-button-type="button-icon"
BACk-button-icon="ion-ios7-arrow-BACk">
</ion-nav-bar>
<ion-view title="{{navtitlE}}" class="bubble-BACkground">
<ion-content has-header="true" padding="true">
<h1>Entry Page!</h1>
<a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a>
</ion-content>
</ion-view>
</script>
<script id="tabs.html" type="text/ng-template">
<ion-view title="{{navtitlE}}" left-buttons="leftButtons">
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 1 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 2 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 3" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 3 Content</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
</script>
<script id="mainContainer.html" type="text/ng-template">
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
BACk-button-type="button-icon"
BACk-button-icon="ion-ios7-arrow-BACk"
animation="nav-title-slide-ios7"
>
</ion-nav-bar>
<ion-nav-view name="main"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Side Menu</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="entry" class="item">BACk To Entry Page</a>
<a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="{{navtitlE}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Home Page!</h1>
<a ui-sref="main.info" class="button button-positive">Info</a>
</ion-content>
</ion-view>
</script>
<script id="info.html" type="text/ng-template">
<ion-view title="{{navtitlE}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Info Page!</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
JavaScript的
angular.module('ionicApp',['ionic'])
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('entry',{
url : '/entry',templateUrl : 'entry.html',controller : 'EntryPageController'
})
.state('main',{
url : '/main',templateUrl : 'mainContainer.html',abstract : true,controller : 'MainController'
})
.state('main.home',{
url: '/home',views: {
'main': {
templateUrl: 'home.html',controller : 'HomePageController'
}
}
})
.state('main.info',{
url: '/info',views: {
'main': {
templateUrl: 'info.html',controller : 'InfoPageController'
}
}
})
.state('main.tabs',{
url: '/tabs',views: {
'main': {
templateUrl: 'tabs.html',controller : 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController',[ '$scope',function($scopE) {
$scope.toggleMenu = function() {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController','$state',function($scope,$statE) {
$scope.navtitle = 'Entry Page';
$scope.signIn = function() {
$state.go('main.home');
}
}])
.controller('HomePageController',$statE) {
$scope.navtitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',tap: function(E) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController',$statE) {
$scope.navtitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',tap: function(E) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController',$statE) {
$scope.navtitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',tap: function(E) {
$scope.toggleMenu();
}
}];
}])
它花了一些调整但最终在我的场景中工作
以上是大佬教程为你收集整理的angularjs – 在侧面菜单页面上使用Ionic选项卡全部内容，希望文章能够帮你解决angularjs – 在侧面菜单页面上使用Ionic选项卡所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。