使用 ui-router 和 ion-tabs 时模板不会更新

IT技术 javascript html angularjs angular-ui-router ionic-framework
2021-01-19 16:45:45

代码

http://codepen.io/hawkphil/pen/LEBNVB

从侧面菜单中有两页(link1link2)。每个页面有 2 个标签:

link1:tab 1.1tab 1.2

link2:tab 2.1tab 2.2

ion-tabs为每个页面使用包含 2 个选项卡。

这是一个非常简单的设计:我想点击link1link2去合适的路线。但由于某种原因,状态已正确更改(请参阅控制台)但实际的 html 模板并未更新。你能找出问题所在以及如何解决吗?

似乎有一些缓存问题或什么的。

HTML

<title>Tabs Example</title>

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <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-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-balanced">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="link1">
          Link 1
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="link2">
          Link 2
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

  <ion-side-menu side="right">
    <ion-header-bar class="bar-calm">
      <h1 class="title">Right Menu</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list list-inset">
        <label class="item item-input">
          <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="Search">
        </label>
      </div>
      <div class="list">
        <a class="item item-avatar" href="#">
          <img src="img/avatar1.jpg">
          <h2>Venkman</h2>
          <p>Back off, man. I'm a scientist.</p>
        </a>
      </div>
    </ion-content>
  </ion-side-menu>
  </ion-side-menus>
</ion-side-menus>

<script id="link1.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="Home" icon="ion-home">
      <ion-view view-title="Home">
        <ion-content has-header="true" has-tabs="true" padding="true">
          <p>Test</p>
          <p>Test Tab 1.1</p>
        </ion-content>
      </ion-view>          
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information">
      <ion-view view-title="Home">
        <ion-content has-header="true" has-tabs="true" padding="true">
          <p>Test</p>
          <p>Test Tab 1.2</p>
        </ion-content>
      </ion-view> 
    </ion-tab>

  </ion-tabs>
</script>

<script id="link2.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="Home" icon="ion-home">
      <ion-view view-title="Home">
        <ion-content has-header="true" has-tabs="true" padding="true">
          <p>Test</p>
          <p>Test Tab 2.1</p>
        </ion-content>
      </ion-view>          
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information">
      <ion-view view-title="Home">
        <ion-content has-header="true" has-tabs="true" padding="true">
          <p>Test</p>
          <p>Test Tab 2.2</p>
        </ion-content>
      </ion-view> 
    </ion-tab>

  </ion-tabs>
</script>

JS

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('link1', {
      url: "/link1",
      views: {
        'menuContent': {
          templateUrl: "link1.html"
        }
      }
    })
    .state('link2', {
      url: "/link2",
      views: {
        'menuContent': {
          templateUrl: "link2.html"
        }
      }
    });

   $urlRouterProvider.otherwise("/link1");

})

.controller('AppCtrl', ['$scope', '$rootScope', '$state', '$stateParams', function($scope, $rootScope, $state, $stateParams) {

  $rootScope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) {
    console.log(toState);
  });

}])
1个回答

您目前指的是最新版本,1.0.0-rc.0版本在从一种状态转换到另一种状态时存在错误,但未加载视图。

进一步的研究发现,他们有 14 个 Beta 版本,从版本1.0.0-beta.11.0.0-beta.14现在1.0.0-rc.0是候选版本

nav-view1.0.0-beta.13版本之前一直运行良好,但在之后停止工作1.0.0-beta.14(这是最后一个测试版),

我建议你将你的版本降级到1.0.0-beta.13,我知道依赖 beta 版本并不是一件好事,但在 ionic 发布稳定版本之前,你必须依赖它。

工作Codepen1.0.0-beta.13

更新:

您的问题是您的视图正在被缓存,因为默认情况下,您的 ionic 应用程序内启用了缓存。

直接来自Ionic Doc(最新版本 doc 1.0.0-beta.14)

默认情况下,视图会被缓存以提高性能。当一个视图被导航离开时,它的元素留在 DOM 中,它的作用域与 $watch 循环断开连接。当导航到一个已经缓存的视图时,它的作用域会重新连接,并且留在 DOM 中的现有元素成为活动视图。这也允许保持先前视图的滚动位置。缓存视图的最大容量为 10。

因此,通过提cache: false$stateProvider国家的功能或全局做禁用NAV视图的高速缓存$ionicConfigProvider.views.maxCache(0);的角度配置阶段内。

因此,在您的情况下,这就是确切的问题,您的第一个视图正在获取缓存并一次又一次地显示它

有3种方法可以解决这个问题

1. 全局禁用缓存

通过将其设置为 0 来禁用所有缓存,然后再使用它添加$ionicConfigProvider依赖项。

$ionicConfigProvider.views.maxCache(0);

代码笔

2. 禁用状态提供程序中的缓存

$stateProvider
.state('link1', {
  url: "/link1",
  cache: false,
  views: {
    'menuContent': {
      templateUrl: "link1.html"
    }
  }
})
.state('link2', {
  url: "/link2",
  cache: false,
  views: {
    'menuContent': {
      templateUrl: "link2.html"
    }
  }
});

代码笔

3. 禁用带有属性的缓存

    <ion-tab title="Home" icon="ion-home">
      <ion-view cache-view="false" view-title="Home">
        <!-- Ion content here -->
      </ion-view>          
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information">
      <ion-view cache-view="false" view-title="Home">
        <!-- Ion content here -->
      </ion-view> 
    </ion-tab>

代码笔

我相信更新后的方法非常适合实施。谢谢。

相同问题的 Github 问题链接在这里

顺便说一下,我在 ionic github 上打开了这个 bug:github.com/driftyco/ionic/issues/3684
2021-03-19 16:45:45
@生命值。请检查我更新的方法,在没有任何伤害的情况下实施会很棒。谢谢..
2021-03-27 16:45:45
遇到同样的问题,解决方案 #1 对我不起作用,必须在受影响的路线上使用解决方案 #2。我要再次感谢@pankajparkar 帮助我找到了这个。stackoverflow.com/questions/30110598/...
2021-03-27 16:45:45
哦,这很奇怪……有人在 Ionic github 上提交了错误吗?
2021-04-04 16:45:45
@HP.我没有发现
2021-04-05 16:45:45