javascript - 使用 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，它在从一种状态转换到另一种状态时存在错误，它没有加载 View 。

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

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

更新:

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

直接来自 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 状态函数或通过执行 $ionicConfigProvider.views.maxCache(0) 全局禁用导航 View 缓存; 在 Angular 配置阶段。

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

有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