本文实例讲述了AngularJS中transclude用法。分享给大家供大家参考，具体如下： Transclude - 在Angular的指令中，大家会看到有一个这样的一个配置属性，这个单词在英文字典里面也查询不到真实的意思，所以就用英文来标示它吧。如果你深入的使用angular的话，你就花很大一部分时间来创建自定义指令，那么就不可避免的要深入理解transclude。简单的讲，transclude主要完成以下工作，取出自定义指令中的内容(就是写在指令里面的子元素...
本文实例讲述了AngularJS验证信息框架的封装插件用法。分享给大家供大家参考，具体如下： AngularJS 的表单验证规则 angular.js 的表单验证规则有 required(必填项)，type="number"(必须为数字)，type="email"(必须为邮箱地址)，ng-max（最大值），ng-min（最小值），ng-max-length（最大长度），ng-min-length（最小长度），ng-pattern（正则验证）等等，而且angular写自定的验证规则也很简单。 具体的验证细节参考官方文档：http...
本文实例讲述了AngularJS表单校验用法。分享给大家供大家参考，具体如下： 表单数据的校验对于提高WEB安全性意义不大，因为服务器接收到的请求不一定来自我们的前端页面，有可能来自别的站点，黑客可以自己做一个表单，把数据提交到我们的服务器（即跨站伪造请求），这样就绕过了前端页面的校验。如果对HTTP协议比较熟，甚至还可以在程序中手动构造一段HTTP请求发到服务器，所以服务器端的数据校验绝对是必不可少的。 WEB前端数据校...
本文实例讲述了AngularJS多视图切换用法。分享给大家供大家参考，具体如下： 在AngularJS应用中，我们可以將html碎片写在一个单独的文件中，然后在其他页面中將该段碎片加载进来。如果有多个碎片文件，我们还可以在控制器中根据用户的操作动态的加载不同的碎片，从而达到切换视图的效果。 先来看看笔者写好的一个案例吧：这两首词实际上是两个html碎片，分别写在page1.html和page2.html。下面是这两个文件的内容： <!--page1.html内...
最近在angular中使用select指令时，出现了很多问题，搞得很郁闷。查看了很多资料后，发现select指令并不简单，决定总结一下。select用法： <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明：发现并没有ng-change属性ng-required：当属性值为true时，对select添加required验证，为false时不验证。ng-options：指定数据源，生成option选项。数据源为数组时,用法：label for v...
先说下缓存： 一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复，消耗时间。因此缓存适用于变化性不大的一些数据，缓存能够服务的请求越多，整体系统性能就能提升越多。 $cacheFactory介绍： $cacheFactory是一个为Angular服务生产缓存对象的服务。要创建一个缓存对象，可以使用$cacheFactory通过一个ID和capacity。其中，ID是一个缓存对象的名称，capacity则是描...
本文实例讲述了Angular外部使用js调用Angular控制器中的函数方法或变量。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html ng-app="myApp" id="myApp"> <head><meta name="viewport" content="width=device-width" /><title>Test</title><script src="~/Content/Js/Plugins/AngularJS/angular.min.js"></script> </head> <body ng-controller="myController">{{msg}}<a href="javascript:;" id="lbtnTest">调用</a> </body...
AngularJS ng-hide 指令AngularJS 实例在复选框选中时隐藏一部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="">隐藏 HTML: <input type="checkbox" ng-model="myVar"><div ng-hide="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> </div></body> </html>定义和用法ng-hide 指令在表达式为 true 时...
AngularJS ng-href 指令 AngularJS 实例使用 AngularJS 设置添加链接: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><div ng-init="myVar = http://www.runoob.com"> <h1>菜鸟教程</h1> <p>访问 <a ng-href="{{myVar}}">{{myVar}}</a> 学习!</p> </div><p>该实例可以使用了原生的 href 属性，但在 Angular...
AngularJS ng-dblclick 指令AngularJS 实例在每次鼠标双击时，变量 count 加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><p>鼠标双击标题:</p><h1 ng-dblclick="count = count + 1" ng-init="count=0">Welcome</h1><p>双击了 {{count}} 次。</p><p>计数变量 "count" 在每次鼠标双击标题后加 1。</p><...
AngularJS ng-if 指令AngularJS 实例取消选中，并移除内容:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="">保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true"><div ng-if="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> <hr> </div><p>当复选框取消选中时 DIV 元素将移除...
AngularJS ng-class 指令 AngularJS 实例修改 <div> 元素的类: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .sky {color:white;background-color:lightblue;padding:20px;font-family:"Courier New"; } .tomato {background-color:coral;padding:40px;font-family:Verdana; } </style> </head> <body ng-app=""><p>选择一...
AngularJS ng-class-even 指令AngularJS 实例为表格的偶数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style> .striped {color:white;background-color:black; } </style> </head> <body ng-app="myApp"><table ng-controller="myCtrl"> <tr ng-repeat="x in records" ng-class-even="striped"><td>{{x....
本教程使用AngularJs版本：1.5.3AngularJs GitHub: https://github.com/angular/angular.js/AngularJs下载地址：https://angularjs.org/摘要：Directive（指令）笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此，你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补...
在AngularJS中$interval用来处理间歇性处理一些事情。 最常用的是： var app = angular.module("app",[]); app.controller("AppCtrl", function($q. $interval){ var timer = $interval(function(){ },100); timer.then(success); function success(){ console.log("done"); } }) 以上，每隔100毫秒就做一件事，所有都昨晚在调用then函数。也就是，$interval提供回调函数。 是否可以控制做事的次数呢？ --可以的。 var timer = $in...