[英]Ionic Side Menu Issue
我的主页和侧面菜单有问题,每当我尝试进入主页时,它就会弹回到我的“其他”视图。 每当我删除菜单的实现时,在app.js中,我的首页都可以正常运行。 我决定使用空白版本,而不是使用入门菜单https://github.com/driftyco/ionic-starter-sidemenu ,以便我可以了解有关Ionic的全部知识。是我的代码。
app.js
.config(function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state('intial', {
url: '/',
templateUrl: 'auth/Walkthrough.html',
controller: 'WalkthroughCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'auth/Login.html',
controller: 'LoginCtrl'
})
.state('sign', {
url: '/sign',
templateUrl: 'auth/SignUp.html',
controller: 'SignUpCtrl'
})
.state('app', {
url: '/app',
abstract: false,
templateUrl: 'app/menu.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'app/Home.html',
controller: 'HomeCtrl'
}
}
})
});
Home.html
<ion-view title="Home">
<ion-pane class="animated fadeIn" style="background-color: #4da6b1">
<ion-nav-bar align-title="center">
<ion-nav-title>
<span style="color: white">Home</span>
</ion-nav-title>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon-round" style="color: white; background-color:#028090;" ></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header" style="margin-top: 10px;" data-tap-disabled="true">
<!-- <div class=".col" style=" margin-left: 2px;border: 1px solid white; width: 50%; height: 50%; border-radius: 5px;">
</div> -->
</ion-content>
</ion-pane>
</ion-view>
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i>Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
请帮忙。
在html页面按钮中,您没有ng-click
这是离子性侧面菜单的格式
<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
</ion-side-menu-content>
<!-- Right menu -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
这应该在您的控制器内部
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
有关离子性侧面菜单的更多信息,请参阅此 。
也在href="#/app/browse", href="#/app/search", href="#/app/playlists"
所有此页面均未在.config中定义,因此创建这些页面并将其添加到.config中 ,就不需要所有的href。
对于$ state.go('home'); 你应该将模块中注入ui.router和下载角-UI-router.min.js并把它添加到您的项目还是看这个所以它会奏效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.