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.数据驱动.双向绑定 ...
随机推荐
- Oracle\PLSQL Developer报“动态执行表不可访问,本会话的自动统计被禁止”的解决方案
现象: 第一次用PLSQL Developer连接数据库,若用sys用户登录并操作则正常,若用普通用户比如haishu登录并创建一个表则报错“动态执行表不可访问,本会话的自动统计被禁止.在执行菜单里你 ...
- Highcharts获取json数据展现pie饼图
实际上很多时候图表展现的数据都是从服务器端获取,现在来做一个简单的异步获取json数据的例子. 服务器端用Servlet3.0实现,JSP页面通过jquery异步请求json数据提供给Highchar ...
- 2016大连网络赛 Different GCD Subarray Query
Different GCD Subarray Query Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K ( ...
- CentOS 6.5搭建Samba服务器
目标需求:在Windows7下访问CentOS 6.5 root用户桌面/ZS文件夹 0.准备工作 关闭防火墙并开启不起动 service iptables stop chkconfig iptabl ...
- 根据浏览器UA信息进行跳转(移动和pc)
如何用php判断一个客户端是手机还是电脑?其实很简单,开发人员都知道,通过浏览器访问网站时,浏览器都会向服务器发送UA,即User Agent(用户代理).不同浏览器.同一浏览器的不同版本.手机浏览器 ...
- HDU 5166 Missing number 简单数论
Missing number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) [ ...
- @Resource @Autowired 区别
spring2.5提供了基于注解(Annotation-based)的配置,我们可以通过注解的方式来完成注入依赖.在Java代码中可以使用 @Resource或者@Autowired注解方式来经行注入 ...
- php script 的生命周期
原文地址:https://support.cloud.engineyard.com/hc/en-us/articles/205411888-PHP-Performance-I-Everything-Y ...
- CodeForces 614C Peter and Snow Blower
简单计算几何,只要算出圆心到多边形上的最短距离和最长距离即可 #include<cstdio> #include<cstring> #include<cmath> ...
- servlet与CGI的区别
与cgi的区别在于servlet处于服务器进程中,它通过多线程方式运行其service方法,一个实例可以服务于多个请求,并且其实例一般不会销毁,而CGI对每个请求都产生新的进程,服务完成后就销毁,所以 ...