Angularjs在初始化未完毕时出现闪烁问题的解决方法分析

本文实例讲述了Angularjs在初始化未完毕时出现闪烁问题的解决方法。分享给大家供大家参考，具体如下：

方法1：

使用ng-cloak指令，在绑定数据的区域使用该指令并设置该指令的样式为隐藏即可，如下所示：

Html：

<body ng-controller="QuberController" ng-cloak class="ng-cloak">

Css：

.ng-cloak { display: none; }

方法2：

使用ng-bind指令来代替{{ item.name }}，如下所示：

{{item.name}} → <span ng-bind="item.name"></span>

方法3：

使用resolve属性（可参考：http://www.jb51.net/article/80523.htm）

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • Angular.js基础学习之初始化

    一.绑定初始化,自动加载 通过绑定来进行angular的初始化,会把js代码侵入到html中. ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的. <body ng-app="myApp"> <div ng-controller="myCtrl"> {{ hello }} <

  • AngularJS初始化静态模板详解

    AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model.ng-click给动态添加的dom元素绑定数据和事件,怎么办? 动态添加dom元素的场景非常常见,如点击某页面上修改用户资料的按钮,发送ajax请求去查询用户资料,然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串

  • AngularJS使用ng-Cloak阻止初始化闪烁问题的方法

    本文实例讲述了AngularJS使用ng-Cloak阻止初始化闪烁问题的方法.分享给大家供大家参考,具体如下: 在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({% raw %} {{ express }} {% endraw %} ),或者是模块(div)的闪烁.对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready).对于angular会在DOM ready完会才回去解析html view Templ

  • AngularJS初始化过程分析(引导程序)

    概览 这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化. AngularJS的 <script> 标签 这个示例展示了我们推荐的整合AngularJS的方法,它被称之为"自动初始化". 复制代码 代码如下: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app>     <body>         ..

  • 手动初始化Angular的模块与控制器

    在上面的文章中,都是在html元素上绑定ng-app="myApp",然後使用angular.module('myApp',[]);来初始化模块的操作,下面我们来用angular.bootstrap方法手动初始化模块. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • Angularjs在初始化未完毕时出现闪烁问题的解决方法分析

    本文实例讲述了Angularjs在初始化未完毕时出现闪烁问题的解决方法.分享给大家供大家参考,具体如下: 方法1: 使用ng-cloak指令,在绑定数据的区域使用该指令并设置该指令的样式为隐藏即可,如下所示: Html: <body ng-controller="QuberController" ng-cloak class="ng-cloak"> Css: .ng-cloak { display: none; } 方法2: 使用ng-bind指令来代替

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

  • AngularJS 中使用Swiper制作滚动图不能滑动的解决方法

    Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <!-- =======循环部分======= --> &

  • mysql安装时出现各种常见问题的解决方法

    mysql安装时出现各种常见问题的解决方法

    小编为大家整理许多mysql安装时出现各种常见问题的解决方法,供大家参考,具体内容如下 问题一: 当各位在安装.重装时出现could not start the service mysql error:0 原因: 卸载mysql时并没有完全删除相关文件和服务,需要手动清除. 安装到最后一步execute时不能启动服务的解决方法: 首先,在管理工具->服务里面将MySQL的服务给停止(有的是没有安装成功,有这个服务,但是已经停止了的),win+R->cmd,打开命令提示符窗口,输入命令:sc d

  • angularJs select绑定的model取不到值的解决方法

    前端直接绑定值,不传参数,controller中会一直取到初始化的值,无法实时获取前端select改变的值. 解决方法一:前端调用方法的时候,一边传参数(亲测可用) <select ng-model="speed" name="speed" ng-change="vm.h5Video().Playspeed(speed)> <option value="1" selected="selected"&

  • IDEA手动添加junit4时出现的问题与解决方法

    IDEA手动添加junit4时出现的问题与解决方法

    当我写@Test注解时,一直报错 后来百度是缺少junit4的包 手动添加junit4包 具体查看是在左上角 file–>project structure 点击进来以后选择modules,再点击当前的项目JDBC,就可以看到当前模块的一些依赖库,此时是没有导入junit4的. 此时点击右边加号,点击2.library,再点击Java,选择IDEA安装目录,在lib文件夹中找到junit-4.12 然后应用,此时@Test注解不再报错,但是运行时出现错误 查询官网: 查官网: JUnit now

  • iOS11 SectionHeader 胡乱移动且滑动时出现重复内容的解决方法

    升级到iOS 11后,痛苦的事情多起来了,以前版本没有的出现问题的代码,经过Xcode 9一编译,千万草泥马奔腾而过: 今天碰到一个奇葩问题,直接进入主题: 问题描述: -(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 12; } -(UIView *)tableView:(UITableView *)tableView viewForHeaderIn

  • ThinkPHP提交表单时默认自动转义的解决方法

    本文实例讲述了ThinkPHP提交表单时默认自动转义的解决方法.分享给大家供大家参考.具体方法如下: 一.问题: 在ThinkPHP中提交表单插入数据的时候,单引号和双引号是会被自动转义的,就是会自动的加上反斜线,但是我不想给单引号和双引号加上反斜线. 在ThinkPHP中提交表单插入数据的时候,单引号和双引号是会被自动转义的,就是会自动的加上反斜线,但是我不想给单引号和双引号加上反斜线,在ThinkPHP中提交表单插入数据的时候,单引号和双引号是会被自动转义的,就是会自动的加上反斜线,但是我不

  • MySQL从命令行导入SQL脚本时出现中文乱码的解决方法

    本文实例讲述了MySQL从命令行导入SQL脚本时出现中文乱码的解决方法.分享给大家供大家参考,具体如下: 在图形界面管理工具 MySql Query Browser中打开脚本(脚本包括建库.建表.添加数据),并执行,不会有任何问题:但是使用mysql命令行工具执行建库脚本时,添加数据中如果包含中文,存入的数据就是乱码或是???... 解决方法1:在MySql安装目录下找到my.ini,将[mysql]下的default-character-set=latin1改为default-characte

  • jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法

    本文实例讲述了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法.分享给大家供大家参考,具体如下: 大家都知道,ArtDialog是一款非常不错的.轻量级的.基于jQuery的对话框插件,深受大家的追捧,大伙可以到一下地址进行下载: https://code.google.com/p/artdialog/ https://github.com/aui/artDialog 截止到2014年9月17日,已经有几个重大的版本v4.1.7.v5.0.4和v6.0.2,其中4.x

随机推荐