使用UI路由器和离子标签模板时，不更新 [英] Template does not update when using ui-router and ion-tabs

查看：152
本文介绍了使用UI路由器和离子标签模板时，不更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

code

HTTP：//$c$cpen.io/hawkphil/pen/LEBNVB

我有两页（链接2 链接1 和）从侧面菜单。每个页面有2个标签：

链接1 ：设置页1.1 和设置页1.2

链接2 ：设置页2.1 和设置页2.2

我使用离子标签页为每个页面包含了2片。

这是一个非常简单的设计：我想请点击链接1 或链接2 去合适的路径。但由于某些原因，国家已正确更改（见控制台），但实际的HTML模板未更新。 你能找出什么是错的，以及如何解决？

似乎有一些问题缓存或东西。

HTML


  
    
    

 ＆LT;标题＆GT;标签示例＆LT; /标题＆GT;＆LT;链接HREF =// code.ionicframework.com /夜间/ CSS / ionic.css的rel =stylesheet属性＆GT;
＆LT;脚本的src =// code.ionicframework.com /夜间/ JS / ionic.bundle.js＆GT;＆LT; / SCRIPT＆GT;
 

 ＆LT;离子侧菜单使菜单与 - 背意见=false的＆GT;
  ＆LT;离子侧面菜单内容＆GT;
    ＆LT;离子导航栏类=扎阳＆GT;
      ＆LT;离子NAV-后退按钮＆GT;
      ＆LT; /离子NAV-后退按钮＆GT;      ＆LT;离子NAV-按键侧=左＆GT;
        ＆LT;按钮类=按钮，按钮图标按钮清晰离子navicon菜单切换=左＆GT;
        ＆LT; /按钮＆GT;
      ＆LT; /离子NAV-按钮＆GT;
      ＆LT;离子NAV-按键侧=右＆GT;
        ＆LT;按钮类=按钮，按钮图标按钮清晰离子navicon菜单切换=右＆GT;
        ＆LT; /按钮＆GT;
      ＆LT; /离子NAV-按钮＆GT;
    ＆LT; /离子导航栏＆GT;
    ＆LT;离子导航视图名称=menuContent＆GT;＆LT; /离子NAV-视图＆gt;
  ＆LT; /离子侧面菜单内容＆GT;  ＆LT;离子侧面菜单侧=左＆GT;
    ＆LT;离子头吧级=栏平衡＆GT;
      ＆LT; H1类=标题＆GT;左，LT; / H1＆GT;
    ＆LT; /离子头吧＆GT;
    ＆LT;离子含量＆GT;
      ＆LT;离子列表＆gt;
        ＆LT;离子项目导航清晰的菜单UI接近，SREF =链接1＆GT;
          链接1
        ＆LT; /离子项目＆GT;
        ＆LT;离子项目导航清晰的菜单UI接近，SREF =链接2＆GT;
          链接2
        ＆LT; /离子项目＆GT;
      ＆LT; /离子列表＆gt;
    ＆LT; /离子含量＆GT;
  ＆所述; /离子侧菜单＆gt;  ＆LT;离子侧面菜单侧=右＆GT;
    ＆LT;离子标题栏类=扎平静＆GT;
      ＆LT; H1类=标题＆GT;右键菜单＆LT; / H1＆GT;
    ＆LT; /离子头吧＆GT;
    ＆LT;离子含量＆GT;
      ＆LT; D​​IV CLASS =名单列表的插图＆GT;
        ＆LT;标签类=逐项输入＆GT;
          ＆LT; I类=图标离子搜索占位符图标＆GT;＆LT; / I＆GT;
          ＆LT;输入类型=文本占位符=搜索＆GT;
        ＆LT; /标签＆gt;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV CLASS =清单＆GT;
        ＆LT;一类=项项具象的href =＃＆GT;
          ＆所述; IMG SRC =IMG / avatar1.jpg＆GT;
          ＆LT; H2＆GT;的Venkman＆LT; / H＆GT;
          ＆LT; P＆GT;返回了，伙计。我是一个科学家＆LT; / P＆GT;
        ＆所述; / A＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; /离子含量＆GT;
  ＆所述; /离子侧菜单＆gt;
  ＆LT; /离子侧菜单＆GT;
＆LT; /离子侧菜单＆GT;＆LT;脚本ID =link1.html类型=文/ NG-模板＆GT;
  ＆LT;离子标签类=标签图标，顶部的标签阳性＆GT;    ＆LT;离子分页标题=家图标=离子家＆GT;
      ＆LT;离子查看查看标题=家＆GT;
        ＆LT;离子含量有头=真有-标签=真正的填充=真＆GT;
          ＆所述p为H.;试验＆下; / P＆GT;
          ＆LT; P＆GT;测试选项卡1.1＆LT; / P＆GT;
        ＆LT; /离子含量＆GT;
      ＆LT; /离子视图＆gt;
    ＆LT; /离子标签＆gt;    ＆LT;离子分页标题=关于图标=离子IOS信息＆GT;
      ＆LT;离子查看查看标题=家＆GT;
        ＆LT;离子含量有头=真有-标签=真正的填充=真＆GT;
          ＆所述p为H.;试验＆下; / P＆GT;
          ＆LT; P＆GT;测试选项卡1.2 LT; / P＆GT;
        ＆LT; /离子含量＆GT;
      ＆LT; /离子视图＆gt;
    ＆LT; /离子标签＆gt;  ＆LT; /离子标签＆GT;
＆LT; / SCRIPT＆GT;＆LT;脚本ID =link2.html类型=文/ NG-模板＆GT;
  ＆LT;离子标签类=标签图标，顶部的标签阳性＆GT;    ＆LT;离子分页标题=家图标=离子家＆GT;
      ＆LT;离子查看查看标题=家＆GT;
        ＆LT;离子含量有头=真有-标签=真正的填充=真＆GT;
          ＆所述p为H.;试验＆下; / P＆GT;
          ＆LT; P＆GT;测试选项卡2.1＆LT; / P＆GT;
        ＆LT; /离子含量＆GT;
      ＆LT; /离子视图＆gt;
    ＆LT; /离子标签＆gt;    ＆LT;离子分页标题=关于图标=离子IOS信息＆GT;
      ＆LT;离子查看查看标题=家＆GT;
        ＆LT;离子含量有头=真有-标签=真正的填充=真＆GT;
          ＆所述p为H.;试验＆下; / P＆GT;
          ＆LT; P＆GT;测试选项卡2.2＆LT; / P＆GT;
        ＆LT; /离子含量＆GT;
      ＆LT; /离子视图＆gt;
    ＆LT; /离子标签＆gt;  ＆LT; /离子标签＆GT;
＆LT; / SCRIPT＆GT;


JS 

  angular.module（'ionicApp'，['离子']）的.config（函数（$ stateProvider，$ urlRouterProvider）{  $ stateProvider
    .STATE（'LINK1'，{
      网址：/ LINK1
      观点：{
        menuContent：{
          templateUrl：link1.html
        }
      }
    }）
    .STATE（'链接2'，{
      网址：/链接2
      观点：{
        menuContent：{
          templateUrl：link2.html
        }
      }
    }）;   $ urlRouterProvider.otherwise（/ LINK1）;}）.controller（'AppCtrl'，['$范围，$ rootScope'，'$州'，'$ stateParams'，函数（$范围，$ rootScope，$状态，$ stateParams）{  $ rootScope。在$（'$ stateChangeSuccess'，函数（EVT，toState，toParams，fromState，fromParams）{
    的console.log（toState）;
  }）;}]）


解决方案

目前你是指有错误，这是最新发布的 1.0.0-rc.0 而从一个状态到另一个状态的过渡是不加载的看法。

进一步的研究发现，他们不得不从版本 1.0.0-beta.1 14 beta版到 1.0.0-beta.14 后，他们现在是在版本 1.0.0-rc.0 这就是候选发布版。

导航视图正在完善，直到 1.0.0-beta.13 版本，但它停止后<工作code> 1.0.0-beta.14 （这是最后一个测试版），

我建议你降低你的版本 1.0.0-beta.13 ，我知道这取决于测试版是不是好东西，但仍直到离子发布稳定版你不得不依靠它。

工作codePEN 与 1.0.0-beta.13

更新：

您的问题是你的看法越来越因为默认情况下缓存缓存是您的离子型应用程序内启用。

直接从离子文件（最新版本DOC 1.0.0-beta.14）


  

在默认情况下，意见被缓存以提高性能。当一个观点是
  导航离开，其元件被留在DOM，其范围是
  从$观察周期断开。当导航到一个视图是
  已经缓存，然后它的范围重新连接，而现有的
  被留在DOM元素成为活动视图。这也是
  允许对$ P​​ $ pvious享有滚动位置缓存鉴于maintained.Maximum容量为10。


因此​​，通过提缓存：假在 $ stateProvider 状态功能或做禁用全球导航视图缓存 $ ionicConfigProvider.views.maxCache（0）; 里面的角配置相

所以你的情况这是确切的问题，你的第一个观点是获得高速缓存和放大器;再次与放大器显示它;再次

有3种方法来解决这个问题。

1。关闭全局缓存

将其设置为0，用它添加 $ ionicConfigProvider 依赖之前禁用所有缓存。 

  $ ionicConfigProvider.views.maxCache（0）;

的 codePEN

2。国家提供商内部禁用缓存 

  $ stateProvider
.STATE（'LINK1'，{
  网址：/ LINK1
  缓存：假的，
  观点：{
    menuContent：{
      templateUrl：link1.html
    }
  }
}）
.STATE（'链接2'，{
  网址：/链接2
  缓存：假的，
  观点：{
    menuContent：{
      templateUrl：link2.html
    }
  }
}）;

的 codePEN

3。禁用缓存和一个属性 

 ＆LT;离子分页标题=家图标=离子家＆GT;
      ＆LT;离子视图缓存视图=false的观点标题=家＆GT;
        ＆LT;！ - 离子含量在这里 - ＆GT;
      ＆LT; /离子视图＆gt;
    ＆LT; /离子标签＆gt;    ＆LT;离子分页标题=关于图标=离子IOS信息＆GT;
      ＆LT;离子视图缓存视图=false的观点标题=家＆GT;
        ＆LT;！ - 离子含量在这里 - ＆GT;
      ＆LT; /离子视图＆gt;
    ＆LT; /离子标签＆gt;

codePEN

我相信更新的方法将是巨大的落实。谢谢你。

对于同一问题的点击这里

CODE

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

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

link1: tab 1.1 and tab 1.2

link2: tab 2.1 and tab 2.2

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

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);
  });

}])

解决方案

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.

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 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),

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.

Working Codepen with 1.0.0-beta.13

Update:

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

Straight from Ionic Doc (Latest Release 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.

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

There are 3 ways to solve this issue

1. Disable cache globally

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

$ionicConfigProvider.views.maxCache(0);

Codepen

2. Disable cache within state provider

$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. Disable cache with an attribute

    <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 issue for the same issue link here

这篇关于使用UI路由器和离子标签模板时，不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆