Question

我使用Ionic Framework开发了一个移动网络应用程序。

当我使用角度为1.3.0的离子β-13时，ng-show工作正常。但是在角度为1.3.6的离子beta-14更新后，在Safari浏览器上，当我在视图之间导航时，元素开始闪烁。它适用于Chrome。

UDPDATE

我制作了codepen版本的问题。在Safari中的标签之间的过渡是跳跃的（因为隐藏的文本），而在Chrome中它按预期工作。

JS：

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

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

  $stateProvider


  .state('menu', {
  url: '/menu',
  abstract: true,
  templateUrl: "templates/menu.html"
})
  .state('menu.tabs', {
    url: '/tabs',
    templateUrl: 'templates/tabs.html',
    abstract: true
  })

  .state('menu.tabs.first', {
    url: '/first',
    views: {
      'first-tab': {
        templateUrl: 'templates/first.html',
      }
    },
  })

  .state('menu.tabs.second', {
    url: '/second',
    views: {
      'second-tab': {
        templateUrl: 'templates/second.html',
      }
    },
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('menu/tabs/first');

});

HTML：

<html ng-app="starter">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Side Menus</title>

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

  <body>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>

   <script id="templates/menu.html" type="text/ng-template">

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-calm">
            <ion-nav-back-button></ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button menu-toggle="left" class="button button-icon icon ion-navicon">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view>
        </ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-header-bar class="bar-royal">
            <h1 class="title">MENU</h1>
        </ion-header-bar>
        <ion-content>
            <ion-scroll style="height: 100%">
                    <a nav-clear menu-close ui-sref="menu.tabs.first" class="item item-icon-left">
                        <i class="icon ion-calculator"></i>
                        {{ Tabs }}
                    </a>
                </ul>
            </ion-scroll>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>
    </script>  

     <script id="templates/tabs.html" type="text/ng-template">
       <ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="First"
             icon="ion-home"
             ui-sref="menu.tabs.first">
        <ion-nav-view name="first-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Debts"
             icon="ion-compose"
             ui-sref="menu.tabs.second">
        <ion-nav-view name="second-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

  </script>


     <script id="templates/first.html" type="text/ng-template">
       <ion-view cache-view="false">
    <div class="bar bar-subheader">
        <h2 class="title calm">First</h2>
    </div>
    <ion-content class="has-header has-subheader" >
        <div ng-show=false>
            Hidden text 1
        </div>
        unhidden text 1
    </ion-content>
</ion-view>

       </script>

       <script id="templates/second.html" type="text/ng-template">
         <ion-view cache-view="false">
    <div class="bar bar-subheader">
        <h2 class="title calm">Second</h2>
    </div>
    <ion-content class="has-header has-subheader" >
        <div ng-show=false>
            Hidden text two
        </div>
        unhidden text two
    </ion-content>
</ion-view>

  </script>
  </body>
</html>

Answer 1

将ng-show指令更改为不会显示闪烁外观的ng-if="false"

<强> first.html

<ion-content class="has-header has-subheader" >
    <div ng-if="false">
        Hidden text 1
    </div>
    unhidden text 1
</ion-content>

<强> second.html

<ion-content class="has-header has-subheader" >
    <div ng-if="false">
        Hidden text two
    </div>
    unhidden text two
</ion-content>

Codepen

Answer 2

我和safari有类似的问题。

而不是ngShow，我使用了ng-class =“{hidden：myCondition}”和.hidden {display：none;在CSS中。

似乎解决了这个问题。

Answer 3

初始化代码ng-show expression可能会多次检测到，例如，从undefined到true或false。

我猜可能是因为这个原因，导致ng-show元素内部会渲染次数。

您可以检查代码，尝试为表达式设置初始值，或将animate添加到ng-show。

ng-show在野生动物园中以1.3.6的角度闪烁

3 个答案: