angular的时间指令 以及防止闪烁问题
1、点击事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<input ng-click="fun()" type="button" value="点击" />
<div id="box"></div>
</div>
</body>
<script src="js/angurlar素材/angular/angular.js"></script>
<script>
var app =angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.fun=function(){
box.innerHTML="你好"
}
})
</script>
</html>
2、防止闪烁问题
大家都知道在浏览器加载过程中是从上到下加载的,所以说在加载用angular写的页面时候会出现零点几毫秒的闪烁加载,我们可以用以下几种方法来消除闪烁问题
(1)ng-bind绑定指令
<div ng-app="myapp" ng-controller="myctrl">
<span ng-bind="data"></span>
</div>
<script>
var app = angular.module("myapp",[]).controller("myctrl",function($scope){
$scope.data="你好";
}
</script>
(2)ng-cloak预先加载指令
<div ng-app="myapp" ng-controller="myctrl">
<span ng-cloak>{{data}}</span>
</div>
<script>
var app = angular.module("myapp",[]).controller("myctrl",function($scope){
$scope.data="你好";
}
</script>
angular的时间指令 以及防止闪烁问题的更多相关文章
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- angular内置指令相关知识
原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...
- angular.js的时间指令
最后样式 html .input-group(style="max-width:150px") input.form-control(uib-datepicker-popup=&q ...
- Angular内置指令(二)
目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...
- Angular JS 中 指令详解
Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...
- Angular的自定义指令以及实例
本文章已收录于: AngularJS知识库 分类: javascript(55) http://www.cnblogs.com/xiaoxie53/p/5058198.html 前面的文章介 ...
- Angular内置指令(一)
要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突 目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...
- 秒味课堂Angular js笔记------指令
1.属性指令 angularjs样式相关指令: ng-class ng-style ng-href ng-src ng-attr-(suffix) ng-bind ng-cloak 没解析完之前标签 ...
- angular+bootstrap分页指令案例
AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...
随机推荐
- PHP-CGI,FASTcgi,php-fpm,之间的关系?
刚开始对这个问题我也挺纠结的,看了<HTTP权威指南>后,感觉清晰了不少.首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. ...
- java并发包——阻塞队列BlockingQueue及源码分析
一.摘要 BlockingQueue通常用于一个线程在生产对象,而另外一个线程在消费这些对象的场景,例如在线程池中,当运行的线程数目大于核心的线程数目时候,经常就会把新来的线程对象放到Blocking ...
- [福大软工] W班 总成绩排行榜
评分链接 作业1 作业2 作业3 作业4 总分排名
- Alpha第七天
Alpha第七天 听说 031502543 周龙荣(队长) 031502615 李家鹏 031502632 伍晨薇 031502637 张柽 031502639 郑秦 1.前言 任务分配是VV.ZQ. ...
- TOTP算法 基于时间的一次性密码
/** Copyright (c) 2011 IETF Trust and the persons identified as authors of the code. All rights rese ...
- Solr搜索引擎搭建详细过程
1 什么是solr Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr可以独立运行在Jetty.Tomcat等这些Servlet容器中 ...
- 关于搭建MyBatis框架(二)
由于在[关于使用Mybatis的使用说明(一)http://www.cnblogs.com/zdb292034/p/8675766.html]中存在不太完善地方,通过此片文档进行修订: 阅读指南:(1 ...
- csrf学习笔记
CSRF全称Cross Site Request Forgery,即跨站点请求伪造.我们知道,攻击时常常伴随着各种各样的请求,而攻击的发生也是由各种请求造成的. CSRF攻击能够达到的目的是使受害者发 ...
- STM32常见问题
一.STM32 下不了程序 提示: (1).JLink Info: CPU halted Erase Done. Programming Failed! 解决办法: 用isp把芯片全部擦除再试试,如果 ...
- 如何排查CPU飙升的Java问题
1. JPS 查看jvm进程 2. 显示线程列表 ps -mp pid -o THREAD,tid,time 找到了耗时最高的线程tid 3. tid转换成16进制 printf "%x\n ...