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的更多相关文章

  1. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  2. JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  3. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  4. Nginx 部署、反向代理配置、负载均衡

    Nginx 部署.反向代理配置.负载均衡 最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...

  5. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  6. 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点(附下载地址)

    开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...

  7. Google、亚马逊、微软 、阿里巴巴开源软件一览

    Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...

  8. Vue系列(一):简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

  9. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  10. 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.数据驱动.双向绑定 ...

随机推荐

  1. 转 Android 编程下两种方式注册广播的区别

    常驻型广播 常驻型广播,当你的应用程序关闭了,如果有广播信息来,你写的广播接收器同样的能接收到,它的注册方式就是在你应用程序的AndroidManifast.xml 中进行注册,这种注册方式通常又被称 ...

  2. FusionCharts使用问题及解决方法(五)-FusionCharts常见问题大全

    在前4篇文章中,我们总结了FusionCharts XT图表使用中的一些常见问题(FAQ)及解决方法,本文继续讨论FusionCharts使用者常见的一些复杂报错及错误的调试/解决方法. 问题描述:是 ...

  3. linux shell——md5sum,sha1sum,sort,uniq (转)

    1.文件校验 1. md5sum eg: md5sum filename 注:生成一个128位的二进制位,即32位的十六进制字符串 1.验证文件的正确性: md5sum  file1 file2 &g ...

  4. sql server 更新两个表的某个字段

    --临时表 create table tmp_cup ( a varchar(20), b varchar(50), c varchar(20) ) select * from t_customer ...

  5. editplus 常用

    个人习惯风格基本设置:document >preferences >fonts|( Comic sans MS  blod 18) -------------------- \n 去换行 ...

  6. Android MediaScanner:(一)MediaScanner总体架构

    Android MediaScanner:(一)MediaScanner总体架构 分类: Android android.multimedia2012-05-19 18:29 5050人阅读 评论(5 ...

  7. jQuery学习笔记—— .html(),.text()和.val()的使用

    本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法.jQuery中为我 ...

  8. python之路: 基础篇

    )或>>> name = )    #按照占位符的顺序):]        #下标识从0开始的 wulaoer >>> print name[:]        # ...

  9. Linux 软件包安装管理

    转自:http://www.cnblogs.com/Quains/archive/2012/01/03/2311049.html 本文主要是记录下RedHat系列的软件包管理. 内容分为以下三个部分: ...

  10. selenium 多线程

    http://www.cnblogs.com/dingmy/p/3438084.html