我是离子的新成员,我希望创建一个简单的应用程序,左侧菜单侧边栏,在第一页我有一个列表项,当我点击列表中的项目时,我将显示新的sceen详细项目,但我想要将导航栏保持在顶部。这是我想创建的我的应用程序。 我创建了一个菜单侧边栏和列表项相同的左图,但是当我设置事件ng-单击列表中的项目时,我无法创建新页面相同的右图。 如何保存导航栏并将内容更改为新页面?
这是我的代码: menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" ></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" width="{{dev_width}}">
<ion-header-bar class="bar-stable">
<div class="bar-header">
</div>
</ion-header-bar>
<ion-content class="custom">
<ion-list>
<ion-item menu-close href="#/menu/groupa">
<img src="{{availableImages[0].src}}" />{{availableImages[0].text}}
</ion-item>
<ion-item menu-close href="#/menu/groupb">
<img src="{{availableImages[1].src}}" />{{availableImages[1].text}}
</ion-item>
<ion-item menu-close href="#/menu/groupc">
<img src="{{availableImages[1].src}}"/>{{availableImages[0].text}}
</ion-item>
<ion-item menu-close href="#/login">
Logout
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar >
<span class="color-title" ><img src="{{availableImages[2].src}}" width="30" style="vertical-align:middle ;margin-right:15px"/>{{availableImages[2].text}} </span>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
&#13;
Groupb.html:
<ion-view align-title="center">
<ion-nav-title>
<span class="color-title">Group B</span>
</ion-nav-title>
<ion-content class="list-groupa">
<div ng-show="isLoading">Loading.....</div>
<ion-list>
<ion-item ng-repeat="employee in datashow" type="item-text-wrap" ng-click="clicker(datashow)">
<span class="item-group"><b>{{employee.Type}}</b></span>
<p><span class="item-group">test desc2 {{employee.Distance.Value}}</span></p>
</ion-item>
</ion-list>
<!-- </view> -->
</ion-content>
</ion-view>
&#13;
$scope.clicker = function(myValue){
$scope.dataToShare = myValue;
srvShareData.setData($scope.dataToShare);
$state.go('detailgroupb');
};
&#13;
Detailgroupb.html
<ion-view align-title="center">
<ion-nav-bar >
<button ng-click="goBack()">
Set title to banana!
</button>
</ion-nav-bar>
<ion-content class="list-groupa">
<ion-list>
<ion-item ng-repeat="employee in sharedData" type="item-text-wrap" ng-click="clicker(employee)">
<!-- href="#/employee/{{employee.id}}" -->
<span class="item-group"><b>{{employee.Type}}</b></span>
<p><span class="item-group">test desc2 {{employee.Distance.Value}}</span></p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
&#13;
app.js
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('login',{
url:'/login',
templateUrl:'templates/login.html',
controller: 'LoginCtrl'
})
.state('menu',{
url:'/menu',
templateUrl:'templates/menu.html',
controller:'MenuCtrl'
})
.state('menu.groupa', {
url: '/groupa',
views: {
'menuContent': {
templateUrl: 'templates/groupa.html',
controller:'GroupaCtrl'
}
}
})
.state('menu.groupc', {
url: '/groupc',
views: {
'menuContent': {
templateUrl: 'templates/groupc.html',
controller:'GroupcCtrl'
}
}
})
.state('menu.groupb', {
url: '/groupb',
views: {
'menuContent': {
templateUrl: 'templates/groupb.html',
controller:'GroupbCtrl'
}
}
})
.state('detailgroupb',{
url:'/detailgroupb',
templateUrl:'templates/detailgroupb.html',
controller:'GroupbDetailCtrl'
})
;
$urlRouterProvider.otherwise("/login");
})
.config(function($ionicConfigProvider) {
// note that you can also chain configs
$ionicConfigProvider.navBar.alignTitle('center');
});
&#13;