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

Question

代码

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

我有两个侧边菜单页面（link1 和 link2）。每页有 2 个标签：

link1：tab 1.1 和 tab 1.2

link2：tab 2.1 和 tab 2.2

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

这是一个非常简单的设计：我想点击 link1 或 link2 去合适的路线。但由于某种原因，状态已正确更改（请参阅控制台），但实际的 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);
  });

}])

Answer 1

您当前指的是 1.0.0-rc.0 的最新版本，它在从一种状态转换到另一种状态时存在错误，它没有加载视图。

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

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

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

Working Codepen 与 1.0.0-beta.13

更新：

你的问题是你的视图正在被缓存，因为默认情况下你的离子应用程序中启用了缓存。

直接来自 Ionic Doc（最新版本文档 1.0.0-beta.14）

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 或通过在 angular 配置阶段执行 $ionicConfigProvider.views.maxCache(0); 全局禁用导航视图缓存。

所以在你的情况下，这就是问题所在，你的第一个视图正在获取缓存并一次又一次地显示它

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

1.全局禁用缓存

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

$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

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

Github 同一问题的问题 link here

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

Template does not update when using ui-router and ion-tabs

html

javascript

angularjs

angular-ui-router

ionic-framework