ng-bind和ng-model的区别AngularJS的数据绑定有ng-bind和ng-model，一般用于如下：<input ng-model="object.xxx"> <span ng-bind="object.xxx"></span>ng-bind是单向绑定，由作用于$scope到view层，且在HTML控件(HTML控件有：input、select、button和textarea)中不可显示。ng-model是双向绑定，$scope<--->view层。{{}}用于显示数据。 完整代码<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <style> div textarea{ b...
AngularJS中的拦截器实例详解 异步操作 有时候需要在拦截器中做一些异步操作。幸运的是， AngularJS 允许我们返回一个 promise 延后处理。它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应。 下面是项目中用到的代码。 ZbtjxcApp.factory(myHttpInterceptor, [$q, $window,$location, function($q, $window,$location) {return {// 全局响应response: function(response) {// 这里还可以利用promise做异步处理，目前不...
什么是scopeAngularJS 中，作用域是一个指向应用模型的对象，它是表达式的执行环境。作用域有层次结构，这个层次和相应的 DOM 几乎是一样的。作用域能监控表达式和传递事件。在 HTML 代码中，一旦一个 ng-app 指令被定义，那么一个作用域就产生了，由 ng-app 所生成的作用域比较特殊，它是一个根作用域（$rootScope），它是其他所有$Scope 的最顶层。除了用 ng-app 指令可以产生一个作用域之外，其他的指令如 ng-controller，ng-re...
本文实例讲述了Angular1.x自定义指令。分享给大家供大家参考，具体如下： 调用Module.directive方法，传入指令名称和工厂函数，返回一个对象。 指令名称中每个大写字母会被认为是属性名中的一个独立的词，而每个词之间是以一个连字符分隔的。 var myApp = angular.module(myApp, []).directive("unorderedList", function () {return function(scope, element, attrs) {};});返回链式函数 <!DOCTYPE html> <html lang="en"> <head>...
本文实例讲述了Angular1.x复杂指令。分享给大家供大家参考，具体如下：名称描述compile指定一个编译函数controller为指令创建一个控制器函数link为指令指定链接函数replace指定模板内容是否替换指令所应用到的元素require声明对某个控制器的依赖restrict指定指令如何使用ACEMscope为指令创建一个新的作用域或者一个隔离的作用域template指定一个将被插入到HTML文档的模板templateUrl指定一个将被插入到HTML文档的外部模板transclud...
本文实例讲述了AngularJS表单提交。分享给大家供大家参考，具体如下： AngularJS中的数据绑定 AngularJS创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立视图组件中的值都是动态替换的。 ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。 当AngularJS认为某个值可能发生变化...
本文实例分析了AngularJS的ng-repeat指令与scope继承关系。分享给大家供大家参考，具体如下： ng-repeat指令的使用方式可以参考如下代码： <!doctype html> <html lang="en"><head><meta charset="utf-8"><title>ng-repeat</title><script src="jquery-1.11.1.js"></script><script src="angular-1.2.25.js"></script><script>function wholeController($scope,$rootScope,$injector){$scope.buttons = ["button1","button2","butt...
前言 相信大家在做项目里经常需要登录注册，那么在用angularjs该如何实现。下面让我们通过angualr.js来实现注册系统表单验证。 Angular下载地址：https://code.angularjs.org/1.5.0/angular.js 首先看一下页面效果（通过bootstrap实现的布局样式）： 当我们点击提交按钮时，会根据表单验证，若通过，则没有提示语句，若不通过，则会弹出响应提示语句，当然该功能可以通过其他简单方式实现，这里只是通过实战对angular进一步深入理...
本文实例讲述了AngularJS自定义控件。分享给大家供大家参考，具体如下： 自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染。比如说，内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令。 当然你也可以实现自己的。这就是 AngularJS 所谓的"教会 HTML 玩新姿势”。本文将告诉你如何做到。 指令类型 可以自定义的指令类型如下: 元素 属性 CSS class Comment directives 这里面，AngularJS 强烈建议你用元素和...
本文实例讲述了AngularJS通过ng-route实现基本的路由功能。分享给大家供大家参考，具体如下： 为什么需要前端路由~ （1）AJAX不会留下History历史记录 （2）用户无法通过URL进入应用指定的页面（书签或者分享等） （3）AJAX对于SEO是一个灾难 1.一般情况下，我们访问网页的时候，是通过url地址。 比如我们访问一个网页:https://www.baidu.com/index/fix.html 在AngularJS中通过“#”来进行不同页面的路由，比如： https://www.baid...
AngularJS 获取ng-repeat动态生成的ng-model值 最近做项目遇到了ng-model是ng-repeat动态生成的，ng-model=”变量”，什么变量，是未知的，所以你无法在$scope."变量"取到值，就算取到值也是其中一个值，这样的问题，经过百度一番查找找到解决方案，这里记录下，也行可以帮助到大家。 代码 html <div><div class="modal-header"><h3 class="modal-title">用例集全局参数配置</h3></div><div class="modal-body"><tab...
表单验证 我去，我感觉我这个人其实还是一个很傻逼的一个人，老是因为拼错了一个单词或者怎么样就浪费我很长时间，这样真的不行不行，要正确对待这个问题，好了，说正题吧，angular也有表单验证minlength,maxlength,required呀这些个东西，还有也支持h5的那些验证,h5的那些验证，就是type啦，type=email,number,url呀这些，然后现在要用angular来验证，可以定义样式哈，不错，然后怎么验证呢，好的上代码 <!DOCTYPE html> <html ng...
使用情况1 首先，所有满足 a === 3 这种的对象，在angular.equals(a,b)中都会返回真 2 所有对象的类型，以及属性值都相同的，也会返回真 3 NaN和NaN也会返回真（在javascript中，返回的是假） 4 正则也会返回真（在javascirpt，/abc/ /abc/被认为是不相等的）样例<html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js">...
先说下缓存： 一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复，消耗时间。因此缓存适用于变化性不大的一些数据，缓存能够服务的请求越多，整体系统性能就能提升越多。 $cacheFactory介绍： $cacheFactory是一个为Angular服务生产缓存对象的服务。要创建一个缓存对象，可以使用$cacheFactory通过一个ID和capacity。其中，ID是一个缓存对象的名称，capacity则是描...
AngularJS ng-app 指令AngularJS 实例 让 body 元素称为 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=""><p>我的第一个表达式: {{ 5 + 5 }}</p></body> </html> 运行结果： 我的第一个表达式：10 定义和用法ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJ...