• Angular


    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了,刚才学习和总结缓存服务的内容,并且进行了简单的翻译和编写使用案例代码,学习这种事情需要时间慢慢来,欲速则不达么...

  • 相关阅读:
    使用reflux进行react组件之间的通信
    一步一步学习underscore的封装和扩展方式
    使用nodewebx进行前后端开发环境分离
    react项目组件化思考
    css模块化策略
    immutableJS一些API
    CSS布局基础之二认识Viewport
    CSS布局基础之一设备像素,设备独立像素,设备像素比,css像素之间的关系
    【云图】如何制作全国KTV查询系统?
    【高德地图API】从零开始学高德JS API(六)——坐标转换
  • 原文地址:https://www.cnblogs.com/koleyang/p/5053965.html
Copyright © 2020-2023  润新知