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

2022-01-21 00:00:00 angularjs javascript html ionic-framework angular-ui-router

代码

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

我有两个来自侧面菜单的页面(link1 和 link2).每页有 2 个标签:

I have two pages (link1 and link2) from the side menu. Each page has 2 tabs:

link1:tab 1.1 和 tab 1.2

link2:tab 2.1 和 tab 2.2

我正在为每个页面使用 ion-tabs 以包含 2 个选项卡.

I am using ion-tabs for each page to contain the 2 tabs.

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

This is a very simple design: I want to click on the link1 or link2 to go to appropriate route. But for some reason, the state has changed correctly (see Console) but the actual html template did not get updated. Can you find out what's wrong and how to fix?

好像有缓存问题什么的.

There seems to be some caching problem or something.

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.0.0-rc.0，从一种状态转换到另一个它没有加载视图.

You are currently referring to the latest release which is 1.0.0-rc.0 which has bug while transition from one state to another it is not loading the view.

进一步研究发现，在他们现在的版本之后，从版本 1.0.0-beta.1 到 1.0.0-beta.14 有 14 个 beta 版本1.0.0-rc.0 是候选版本.

Further research found that, they had 14 beta releases from version 1.0.0-beta.1 to 1.0.0-beta.14 after they are now on version 1.0.0-rc.0 which is release candidate.

nav-view 在 1.0.0-beta.13 版本之前工作完美，但在 1.0.0-beta.14 之后停止工作>(这是最后一个测试版)，

nav-view is working perfect till 1.0.0-beta.13 version but it stop working after 1.0.0-beta.14(which is last beta release),

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

I would suggest you to degrade your version to 1.0.0-beta.13, I know depending on beta version is not good thing but still until ionic release stable version you have to rely on it.

工作 Codepen 与 1.0.0-beta.13

更新:

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

Your problem is your view are getting cached because by default caching is enabled inside your ionic app.

直接来自 Ionic Doc(最新发布的文档 1.0.0-beta.14)

Straight from Ionic Doc (Latest Release doc 1.0.0-beta.14)

默认情况下，视图被缓存以提高性能.当一个视图是导航离开，它的元素留在 DOM 中，它的范围是与 $watch 周期断开连接.当导航到一个视图时已经缓存，然后重新连接其范围，并且现有的留在 DOM 中的元素成为活动视图.这也是允许保持先前视图的滚动位置.缓存视图的最大容量为 10.

By default, views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a view that is already cached, its scope is then reconnected, and the existing element that was left in the DOM becomes the active view. This also allows for the scroll position of previous views to be maintained.Maximum capacity of caching view is 10.

因此，通过在 $stateProvider 状态函数上提及 cache: false 或通过执行 $ionicConfigProvider.views.maxCache(0) 全局禁用导航视图的缓存; 在 Angular 配置阶段内.

So by mentioning cache: false on $stateProvider states function or disabling cache of nav-view globally by doing $ionicConfigProvider.views.maxCache(0); inside angular config phase.

因此，在您的情况下，这正是问题所在，您的第一个视图正在获取缓存和再次显示它&再次

So in your case this is what exact problem, your 1st view is getting cache & showing it again & again

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

There are 3 ways to solve this issue

1.全局禁用缓存

通过将其设置为 0 来禁用所有缓存，然后在使用它之前添加 $ionicConfigProvider 依赖项.

Disable all caching by setting it to 0, before using it add $ionicConfigProvider dependency. 

$ionicConfigProvider.views.maxCache(0);

Codepen

<强>2.在状态提供程序中禁用缓存

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

Codepen

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>

Codepen

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

I believe the updated approach would be great to implement. Thanks.

同一问题的 Github 问题此处链接

Github issue for the same issue link here

相关文章