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 ...
随机推荐
- 2017-11-15 软件包 java.io学习
接口摘要 一.接口Closeable 方法摘要:void:close();关闭此流并释放与此流关联的所有系统资源.如果已经关闭该流,则调用此方法无效 涉及的异常信息:IOException ----- ...
- eclipse中svn的各种状态图标详解
- 已忽略版本控制的文件.可以通过Window → Preferences → Team → Ignored Resources.来忽略文件. A file ignored by version co ...
- centos 安装atom 笔记
一.安装atom "To install Atom on Linux, you can download a Debian package or RPM package either fr ...
- python全栈学习--day11(函数高级应用)
一,函数名是什么? 函数名是函数的名字,本质:变量,特殊的变量. 函数名()执行此函数 ''' 在函数的执行(调用)时:打散. *可迭代对象(str,tuple,list,dict(key))每一个元 ...
- 高级软件工程第四次作业（C++）
1 团队组成和选题情况说明 1.1 Git链接:https://github.com/WHUSE2017/C-team 1.2 团队组成: PM:齐爽爽(258) 小组成员:马帅(248),何健(26 ...
- 201621123050 《Java程序设计》第2周学习总结
1.本周学习总结 java的数据类型 基本数据类型:介绍了java特有的boolean 引用数据类型 String:不变性:需要频繁修改时使用StringBuilder 包装类:自动拆.装箱 数组 一 ...
- 团队作业2：需求分析&原型设计
Deadline: 2017-11-5 22:00PM,以博客发表日期为准. 评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以 ...
- jQuery函数学习
函数:after(content) 功能:在每个匹配的元素后面添加html内容 返回:jQuery对象 参数:content (<Content>): Content to insert ...
- java.lang.String 类源码解读
String类定义实现了java.io.Serializable, Comparable<String>, CharSequence 三个接口:并且为final修饰. public fin ...
- java语法基础(总结)
1,关键字:其实就是某种语言赋予了特殊含义的单词. 保留字:其实就是还没有赋予特殊含义,但是准备日后要使用过的单词. 2,标示符:其实就是在程序中自定义的名词.比如类名,变量名,函数名.包含 0-9. ...