3

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

当我使用角度为 1.3.0 的离子 beta-13 时，ng-show效果很好。但是在使用 angular 1.3.6 更新到 ionic beta-14 之后，在 Safari 浏览器上，当我在视图之间导航时，元素开始闪烁。它在 Chrome 上运行良好。

UDP日期

我为我的问题制作了一个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>
4

3 回答 3

3

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

第一个.html

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

第二个.html

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

密码笔

于 2015-03-07T19:39:00.707 回答
2

我对 safari 也有类似的问题。

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

它似乎解决了这个问题。

于 2016-01-02T02:03:19.607 回答
0

当初始化代码时，ng-show expression可能会检测到很多次，例如 from undefinedtotrue或false.

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

您可以检查代码，尝试给出表达式来设置初始值，或者animate将ng-show.

于 2015-03-07T13:00:05.283 回答