Angular - - ngCsp、ngFocus、ngBlur、ngForm
ngCsp
处理CSP(上下文安全策略)的支持。
当开发如google浏览器的扩展时候这个就必须使用。
CSP禁止应用程序使用eval和Function(string)生成的函数。如果我们需要兼容,我们只需要使用$parse执行getterfn而不违反这些限制。
AngularJs使用Function(string)以最佳的速度生成功能。使用ngScp指令会导致Angular使用SCP兼容模式。
格式:ng-csp
使用代码:
<div ng-app="Demo" ng-scp></div>
这个指令解释的很高大上,不过看到开发google浏览器插件的时候用,而且平常开发过程中也很少用到,所以就随意提下,感兴趣的可点击上面链接对内容安全策略做个深入的了解。
ngFocus
在focus事件上执行指定表达式。
格式:ng-focus=“value”
value:获取焦点时执行的表达式。
使用代码:
<div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
<input ng-focus="ctrl.fn()" ng-model="ctrl.inputValue" />
</div>
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
var vm = this;
vm.fn = function () {
vm.inputValue = "Hello World !!!";
};
};
}());
这个指令功能就是比如当一个input等获取到焦点的时候,执行你指定的表达式函数,达到你需要的目的。
ngBlur
在blur事件上执行指定表达式。
格式:ng-blur=”value”
value: 失去焦点时执行的表达式。
使用代码:
<div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
<input ng-blur="ctrl.fn()" ng-model="ctrl.inputValue" />
</div>
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
var vm = this;
vm.fn = function () {
vm.inputValue = "Hello World !!!";
};
};
}());
这个指令功能就是比如当一个input等失去焦点的时候,执行你指定的表达式函数,达到你需要的目的。
ngForm
HTML表单元素不允许嵌套。ngForm有可用的嵌套模式,比如有一个子元素的控制需要进行验证。
格式:<ng-form ></ng-form>
贴代码:
<ng-form name="outterForm">
<ng-form name="innerFormOne">
<input required ng-model="textOne" />
<button ng-disabled="innerFormOne.$invalid">保存-内部1</button>
</ng-form>
<ng-form name="innerFormTwo">
<input required ng-model="textTwo" />
<button ng-disabled="innerFormTwo.$invalid">保存-内部2</button>
</ng-form>
<button ng-disabled="innerFormOne.$invalid || innerFormTwo.$invalid">保存-外部</button>
</ng-form>
关于这个指令,个人觉得最令人心动的就是嵌套表单了,之前在js或者jquery开发的时候是无法实现多个小表单同时验证通过才能大表单通过验证的 效果,因为本身form就不允许嵌套的,然而ngForm解决了这个问题,这样就可以先让所有的嵌套的小表单通过验证,然后才整体通过验证并提交表单了。 简直不要太方便~
每天学习的时间也只有晚上这几个小时,今天开始翻译和学习后面的service了,刚才学习和总结缓存服务的内容,并且进行了简单的翻译和编写使用案例代码,学习这种事情需要时间慢慢来,欲速则不达么...
Angular - - ngCsp、ngFocus、ngBlur、ngForm的更多相关文章
- 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Nginx 部署、反向代理配置、负载均衡
Nginx 部署.反向代理配置.负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点(附下载地址)
开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...
- Google、亚马逊、微软 、阿里巴巴开源软件一览
Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...
- Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器
一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
随机推荐
- VC6.0 调试.dll文件
对于自己制作的.DLL文件,一直没有比较好的调试方法,其实是知道的太少. 下面就说说VC6.0下面 怎么调试DLL文件: 首先得有一个调用DLL文件的可执行程序,然后调用这个可执行程序. 在工程上 右 ...
- 条形图(diagrams)
条形图(diagrams) 题目描述 小 虎刚上了幼儿园,老师让他做一个家庭作业:首先画3行格子,第一行有3个格子,第二行有2个格子,第三行有3个格子.每行的格子从左到右可以放棋子,但要 求除第一行外 ...
- DataGridView很详细的用法
DataGridiew用法总结 一.DataGridView 取得或者修改当前单元格的内容: 当前单元格指的是 DataGridView 焦点所在的单元格,它可以通过 DataGridView 对象的 ...
- 数据结构录 之 单调队列&单调栈。
队列和栈是很常见的应用,大部分算法中都能见到他们的影子. 而单纯的队列和栈经常不能满足需求,所以需要一些很神奇的队列和栈的扩展. 其中最出名的应该是优先队列吧我觉得,然后还有两种比较小众的扩展就是单调 ...
- iOS开发概述UIkit动力学,讲述UIKit的Dynamic特性,UIkit动力学是UIkit框架中模拟真实世界的一些特性。
转发:http://my.oschina.net/u/1378445/blog/335014 iOS UIKit动力学 Dynamics UIAttachmentBehavior 实现iMessage ...
- MySQL 1054错误 Unknown column .... in 'on clause'
ERROR 1054 (42S22): Unknown column ... in 'on clause' 原因: MySQL5.0 Bug, 要把联合的表用括号包含起来才行: 例: SELECT ( ...
- PHP学习笔记-1——快捷键
整行删除 ctrl+E set get 生成 alt+ insert 查找.搜索和替换 Ctrl-F3 搜索位于插入点的词 F3/Shift-F3 在文件中查找下一个/上一个 Ctrl-F/H 在文件 ...
- Oracle GoldenGate 异构平台同步(Mysql到Oracle)
一.OGG安装配置(源端) 1.OGG下载 http://www.oracle.com/technetwork/cn/middleware/goldengate/downloads/index.htm ...
- 解决SSh连接过慢
ssh 连接的时候特别慢 解决方法: 修改配置文件 /etc/ssh/sshd_config GSSAPIAuthentication yes --->no 81行左右 #UseDNS yes ...
- PHP header使用
header()函数的作用是:发送一个原始 HTTP 标头[Http Header]到客户端.标头 (header) 是服务器以 HTTP 协义传 HTML 资料到浏览器前所送出的字串,在标头与 HT ...