AngularJs ngCsp、ngFocus、ngBlur、ngForm

最新推荐文章于 2025-09-07 20:05:35 发布

weixin_34161083

最新推荐文章于 2025-09-07 20:05:35 发布

阅读量115

点赞数

文章标签： javascript ViewUI

本文探讨了AngularJS中处理CSP（上下文安全策略）的方法，以及如何使用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>