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的时间指令 以及防止闪烁问题的更多相关文章

  1. Angular.js之指令学习笔记

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  2. angular内置指令相关知识

    原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...

  3. angular.js的时间指令

    最后样式 html .input-group(style="max-width:150px") input.form-control(uib-datepicker-popup=&q ...

  4. Angular内置指令（二）

    目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...

  5. Angular JS 中 指令详解

    Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...

  6. Angular的自定义指令以及实例

    本文章已收录于:  AngularJS知识库  分类: javascript(55)  http://www.cnblogs.com/xiaoxie53/p/5058198.html   前面的文章介 ...

  7. Angular内置指令（一）

    要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...

  8. 秒味课堂Angular js笔记------指令

    1.属性指令 angularjs样式相关指令: ng-class ng-style ng-href ng-src ng-attr-(suffix) ng-bind ng-cloak  没解析完之前标签 ...

  9. angular+bootstrap分页指令案例

    AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...

随机推荐

  1. ASP.NET没有魔法——ASP.NET MVC Razor与View渲染

    对于Web应用来说,它的界面是由浏览器根据HTML代码及其引用的相关资源进行渲染后展示给用户的结果,换句话说Web应用的界面呈现工作是由浏览器完成的,Web应用的原理是通过Http协议从服务器上获取到 ...

  2. [BZOJ 1297][SCOI2009]迷路

    1297: [SCOI2009]迷路 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1418  Solved: 1017[Submit][Status ...

  3. 【Spring源码深度解析学习系列】容器的基础XmlBeanFactory（二）

    一.配置文件封装 Spring的配置文件读取是通过ClassPathResource进行封装的,如new ClassPathResource("test.xml"),那么Class ...

  4. 【前端】wangEditor（富文本编辑器） 简易使用示例

    转载请说明作者或者注明出处,谢谢 说到前端常用的编辑器,自然也少不了富文本编辑器(RichText Editor) 笔者在此之前也看了一些相关的在线编辑器,其中包括了当百度搜索“富文本编辑器”字样时出 ...

  5. 201621123060《JAVA程序设计》第二周学习总结

    1.本周学习总结 本周学习了JAVA中的引用类.包装类(学习了一种语法:自动装箱)和数组(遍历数组的新方法foreach循环). 2. 书面作业 1.String-使用Eclipse关联jdk源代码 ...

  6. defaultdict使用及__missing__理解

    import collections import re WORD_RE = re.compile(r'\w+') index = collections.defaultdict(list) #用li ...

  7. 【iOS】swift 枚举

    枚举语法 你可以用enum开始并且用大括号包含整个定义体来定义一个枚举: enum SomeEnumeration { // 在这里定义枚举 } 这里有一个例子,定义了一个包含四个方向的罗盘: enu ...

  8. NOIP2017 列队

    https://www.luogu.org/problemnew/show/P3960 p<=500 50分 模拟 每个人的出队只会影响当前行和最后一列 p<=500,有用的行只有500行 ...

  9. nyoj 星期几？

    星期几? 时间限制:500 ms  |  内存限制:65535 KB 难度:2   描述                      Acmer 小鱼儿 埋头ku算一道题 条件:已知给定 一日期 告诉你 ...

  10. 微信公众号Markdown编辑器, 适合代码排版

    随着大家都转战微信公众平台,如何快速的编写文章就摆在了首要位置.不可否认,使用微信自带的编辑器可以做出好看的排版,甚至用第三方编辑器有更多的模板.但是,这些全部都需要手动的调整.本来公众平台就算是自媒 ...