gpt4 book ai didi

angularjs - ng-show 在 safari 中以 1.3.6 的 Angular 闪烁

转载 作者:行者123 更新时间:2023-12-01 11:34:26 25 4
gpt4 key购买 nike

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

当我使用 ionic beta-13 和 angular 1.3.0 时,ng-show 运行良好。但是在使用 angular 1.3.6 更新到 ionic beta-14 之后,在 Safari 浏览器上,当我在 View 之间导航时,元素开始闪烁。它在 Chrome 上运行良好。

更新

我做了一个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>

最佳答案

将您的 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

关于angularjs - ng-show 在 safari 中以 1.3.6 的 Angular 闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28914715/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com