文档章节

解决AngualrJS页面刷新导致异常显示问题

 青衫旧巷
发布于 2017/08/15 15:08
字数 483
阅读 7
收藏 0

解决AngualrJS页面刷新导致异常显示问题

为什么在刷新页面的时候,总是先显示一下代码 就是“{{msg}}”,然后出现 $scope.msg="你好!!"; 中的“你好”呢?这样子交互效果非常不好,能不能找个方法解决呢?

答:我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小,甚至让人感觉不到区别;但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面。 这种情况被叫做Flash Of Unrendered Content (FOUC)。以下几种方法可以解决这个问题:

1、ng-cloak ng-cloak指令是angular的内置指令,它的作用是隐藏所有被它包含的元素:

<div ng-cloak>
  <h1>Hello {{ name }}</h1>
</div>

在浏览器加载和编译渲染完成之后,angular会自动删除ngCloak元素属性,这样这个元素就会变成可见的。 在IE7里面使用ng-cloak的安全方式是给元素多加一个ng-cloak的class

<div ng-cloak class="ng-cloak">
  <h1>Hello {{ name }}</h1>
</div>

2、ng-bind ng-bind是angular里面另一个内置的用于操作绑定页面数据的指令。我们可以使用ng-bind代替{{ }}的形式绑定元素到页面上; 使用ng-bind替代{{ }}可以防止未被渲染的{{ }}就展示给用户了,使用ng-bind渲染的空元素替代{{ }}会显得友好很多。 上面的例子可以重写成下面那样,这样就可以防止页面出现{{ }}了

<div>
  <h1>Hello <span ng-bind="name"></span></h1>
</div>

© 著作权归作者所有

粉丝 1
博文 61
码字总数 35826
作品 0
东城
私信 提问
Yearning v1.2 正式发布,Web 端 SQL 审核平台

Yearning 1.2正式发布了。 Yearning SQL 审核平台,基于 Vue.js 与 Django 的整套 sql 审核平台解决方案。 提供基于 Inception 的 SQL 检测及执行。 更新内容: 查询支持字段脱敏 支持多级审...

cookieY
2018/07/10
2K
1
网站出现 502 Bad Gateway 怎么解决?

打开某网站出现一个问题如下图(这里就不说是哪个网站了),那么下面就针对这个问题分享下解决思路。 1、什么是 502 badgateway 报错 ? 简单来说 502 是报错类型代码,bad gateway 错误的网...

糊说八道
2018/08/13
1K
0
angularjs ng-include页面引入controller 提示“XXXController not a function , get undefined”

angualrjs 中a.html中利用ng-include指令引入 页面b.html,b.html页面引入controller 时提示“XXXController not a function, get undefined”, 该XXXController我在其他html文件中引用过,没...

Criske
2018/06/29
838
0
Linux系统中的Nginx由于缓存导致页面不刷新的解决方法

这篇文章介绍了linux环境配置nginx导致页面不刷新的解决方法,有需要的朋友可以参考一下 在linux环境下,配置了nginx负载均衡,由于可能在虚拟主机的配置文件nginx.conf中,对缓存机制未配置...

天下杰论
2014/06/20
143
0
如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某些版本/系统才出现的Bug,每个开发者都...

落影loyinglin
2017/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue中eventBus的使用

使用场景: 1、兄弟组件的通信,父子组件的通信 2、不同路由的通信 针对兄弟组件的通信,父子组件的通信 新建bus.js文件 import Vue from 'vue' var bus = new Vue() export default bus 在需...

tianyawhl
20分钟前
4
0
C# DBHelper

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Data;using System.Data.SqlClient;using System.Windows.Forms;namesp......

vga
22分钟前
4
0
Spring Boot中@ConditionalOnProperty使用详解

在Spring Boot的自动配置中经常看到@ConditionalOnProperty注解的使用,本篇文章带大家来了解一下该注解的功能。 Spring Boot中的使用 在Spring Boot的源码中,比如涉及到Http编码的自动配置...

程序新视界
24分钟前
7
0
centos7下安装mysql(完整配置)

https://blog.csdn.net/baidu_32872293/article/details/80557668

为何不可1995
26分钟前
5
0
如何从零到一设计一个MQ消息队列

消息队列整体设计思路 主要是设计一个整体的消息被消费的数据流。 这里会涉及到:消息生产Producer、Broker(消息服务端)、消息消费者Consumer。 1.Producer(消息生产者):发送消息到Broker。...

一只会编程的狼
32分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部