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. JQuery代码实现上拉加载（不使用插件）

    <script type="text/javascript"> $(window).scroll(function() { //已经滚动到上面的页面高度 var sl_ ...

  2. Spring MVC的handlermapping之BeanNameUrlHandlerMapping初始化

    先介绍一下: BeanNameUrlHandlerMapping是基于配置文件的方式; 所有处理器需要在XML文件中,以Bean的形式配置. 缺点:配置繁琐; 如果多个URL对应同一个处理器,那么需要 ...

  3. 云服务器Windows Server2012 配置http服务器(又称Web服务器，IIS)

    出错:无法打开运行空间池.服务器管理器WinRM插件可能已损坏或丢失. 解决方法: http://shiyousan.com/post/636308065767125916 第一步是开启WinRM服务 ...

  4. 云计算之路-阿里云上-容器难容：容器服务故障以及自建 docker swarm 集群故障

    3月21日,由于使用阿里云服务器自建 docker swarm 集群的不稳定,我们将自建 docker swarm 集群上的所有应用切换阿里云容器服务 swarm 版(非swarm mode). 3月 ...

  5. 系统右键添加cmd命令

    我们运行cmd.exe时,会发现刚刚打开时,一般提示在默认路径下: 有时候我们希望直接能够切换到某个路径下运行程序或者做某些工作,那么切换路径可能就会比较麻烦.下面我们介绍一种比较实用的方法,用鼠标右 ...

  6. Java的HelloWorld程序

    Java的HelloWorld程序 1.新建文本文档,编写HelloWorld程序,最后保存时记得保存成.java格式 2.在D盘新建一个HelloJava文件夹用于保存java程序 3.使用WIN+ ...

  7. eclipse maven项目目录

    今天遇见一个错误,关于eclipse项目的路径问题,web-inf的路径,上图和下图出现了两种web-INF,src的web-INFf和webContent的web-INF,src里面的文件需要编译以 ...

  8. Linux的打印rpm包的详细信息的shell脚本

    #!/bin/bash # list a content summary of a number of RPM packages # USAGE: showrpm rpmfile1 rpmfile2 ...

  9. maven构建spring报错org.springframework.core.NestedRuntimeException cannot be resolved.

    Error:The type org.springframework.core.NestedRuntimeException cannot be resolved. It is indirectly ...

  10. 如何深入系统的学习一门编程语言——python自学笔记

    前言 最早接触python的时候,他并没有现在这么火,我也没把他太当回事,那时候我对python的印象就是给运维人员使用的一门很古老的语言,显然随着tensorflow(以下简称tf)的兴起,pyth ...