AngularJs 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" ng-controller="testCtrl as ctrl">
      <input ng-focus="ctrl.fn()" ng-model="ctrl.inputValue" />
  </div>

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        this.fn = function () {
          this.inputValue = "Hello World !!!";
      };
    };
  }());

这个指令功能就是比如当一个input等获取到焦点的时候，执行你指定的表达式函数，达到你需要的目的。

ngBlur

在blur事件上执行指定表达式。

格式：ng-blur=”value”

value: 失去焦点时执行的表达式。

使用代码：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
      <input ng-blur="ctrl.fn()" ng-model="ctrl.inputValue" />
  </div>

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        this.fn = function () {
          this.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解决了这个问题，这样就可以先让所有的嵌套的小表单通过验证，然后才整体通过验证并提交表单了。简直不要太方便~