Ionic app嵌套视图未在Android

时间:2016-03-24 18:49:00

标签: ionic-framework angular-ui-router

我正在开发具有以下布局的Ionic应用程序:

Image of App Layout

我为此部分设置了以下ui-router状态:



$stateProvider

  .state('home', {
    name: 'home',
    url: '',
    abstract: true,
    templateUrl: "templates/base.html"
  })
  .state('home.map', {
    url: "/main",
    cache: false,
    views: {
      'second': {
           templateUrl: 'templates/map.html',
           controller: 'mapCtrl'
      }
    }
  })
  .state('home.list', {
    url: '/list',
    cache: false,
    views: {
      'second': {
           templateUrl: 'templates/list.html',
           controller: 'listCtrl'
      }
    }  
  })
  
  .state('home.deals', {
    url: '/deals',
    cache: false,
    views: {
      'second': {
           templateUrl: 'templates/deals.html',
           controller: 'dealsCtrl'
      }
    }  
  })




当通过Web浏览器在标题视图中使用以下控件切换状态时,这非常有用:



<div class="col-33 mapPageColPadding">
				<button ui-sref="home.map" ng-class = "{active: isActive('/main'), mapPageBottomHeaderButtons: true}">MAP</button>
			</div>
			<div class="col-33 mapPageColPadding">
				<button ui-sref="home.list" ng-class = "{active: isActive('/list'), mapPageBottomHeaderButtons: true}">LIST</button>
			</div>
			<div class="col-33 mapPageColPadding">
				<button ui-sref="home.deals" ng-class = "{active: isActive('/deals'), mapPageBottomHeaderButtons: true}">DEALS</button>
</div>
&#13;
&#13;
&#13;

这是我的base.html:

&#13;
&#13;
   <ion-content scroll="true">
     <div ng-include src="'templates/partialCustomHeader.html'"></div>
     <div ui-view="second"></div>
   </ion-content>
&#13;
&#13;
&#13;

这是地图视图,非常简单:

&#13;
&#13;
    <ion-content overflow-scroll="true" padding="false" class="myPageHasHeader animationLeft">
    	<div id="map" data-tap-disabled="true"></div>
    </ion-content>
&#13;
&#13;
&#13;

问题是在Android设备上运行时(我还没有测试过IOS)我在这个案例图中正确加载了第一个视图。但是当点击控制器激活的任何菜单选项时(通过我可以告诉的日志),但屏幕仍然显示地图。如果我点击最终菜单选项,应用程序将直观更新以显示第二个视图,但下一个控制器将激活。

更奇怪的是,当使用chrome检查器时,它会显示在Android手机上导航的视图。甚至可以适当地更新拖动和移动。

我觉得问题是渲染不会被刷新或更新,只有在点击另一个状态更改项目时才会更新为其后面的一个。我已禁用所有动画以确保不存在问题。

编辑:这是一个有效的编写工具,可以显示我想要做的事情:http://codepen.io/anon/pen/XdRLag

0 个答案:

没有答案