如何下一个新的场景并在离子中保持导航头衔

时间:2017-01-19 07:49:17

标签: angularjs ionic-framework

我是离子的新成员,我希望创建一个简单的应用程序,左侧菜单侧边栏,在第一页我有一个列表项,当我点击列表中的项目时,我将显示新的sceen详细项目,但我想要将导航栏保持在顶部。这是我想创建的我的应用程序。 我创建了一个菜单侧边栏和列表项相同的左图,但是当我设置事件ng-单击列表中的项目时,我无法创建新页面相同的右图。 如何保存导航栏并将内容更改为新页面?

enter image description here

这是我的代码: 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;
&#13;
&#13;

Groupb.html:

&#13;
&#13;
<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;
&#13;
&#13;

&#13;
&#13;
$scope.clicker = function(myValue){
        $scope.dataToShare = myValue;
	    srvShareData.setData($scope.dataToShare);
	    $state.go('detailgroupb');
  	};
&#13;
&#13;
&#13;

Detailgroupb.html

&#13;
&#13;
<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;
&#13;
&#13;

app.js

&#13;
&#13;
.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;
&#13;
&#13;

我的结果: enter image description here

0 个答案:

没有答案