• angualrjs 总结 随记(二)


    表单控制变量
    form 控制变量

    //字段是否未更改
    fromName.inputFieldName.$pristine
    //字段是否更改
    fromName.inputFieldName.$dirty
    //字段有效
    fromName.inputFieldName.$valid
    //字段无效
    fromName.inputFieldName.$invalid
    //字段错误信息
    fromName.inputFieldName.$error

    css样式

    ng-valid 表单验证通过时的设置
    ng-invalid 表单验证失败时的设置
    ng-pristine 表单未被动之前拥有
    ng-dirty 表单被动后之后拥有

    自定义表单验证

    自定义表单验证ngModel属性总结
    $parsers     保存了从viewValue向modelValue绑定过程中的处理器函数,它们将来会依次执行
    $formatters    保存了从 modelValue向viewValue绑定过程中的处理器函数
    $setViewValue  当view发生了某件事情时,从view向model绑定调用$setViewValue把viewValue保存下来
    $render      当模型发生变化时,应该怎么去更新视图,从model向view绑定,调用ctrl.$render方法,将viewValue渲染到页面上
    $setValidity    设置验证结果
    $viewValue     视图的值
    $modelValue    模型里的值

    $scope绑定事件之$on方法和$emit,$broadcast

    function DemoCtrl($scope){
      $scope.count = 0;
      $scope.$on('myevent',function(){
        $scope.count++;
      })
    }

    视图

    //向同级以上dom所在的作用域传递,就是说只有同级以上的dom里访问才能访问到count属性
    <button ng-click="$emit('myevent')"></button>
    //向同级以下dom所在的作用域传递,同理只有同级以下的dom里访问才能访问到count属性     
    <button ng-click="$broadcast('myevent')"></button> 

    利用ngModel相关属性及方法自定义表单验证指令
    ngModel里的属性总结 已经在上面提到了
    下面这是一个 只能输入偶数的验证指令(自定义表单验证 $setValidaity )

    angular关于表单指令的汇总

    input 属性
      name
      ng-model
      ng-required
      ng-minlength
      ng-maxlength
      ng-pattern 匹配模式
      ng-change 值变化时的回调

    ngModelController的方法和属性的使用

    ngModelController方法

    $render();
      当视图需要更新的时候会被调用。使用ng-model的指令应该自行实现这个方法。

    $isEmpty(value);
      该方法用于判断输入值是否为空。
      例如,使用ngModelController的指令需要判断其中是否有输入值的时候会使用该方法。该方法可用来判断值是否为undefined,'',null或者NaN。
      你可以根据自己的需要重载该方法。

    $setValidity(validationErrorKey, isValid);
      该方法用于改变验证状态,以及在控制变化的验证标准时通知表格。
      这个方法应该由一个验证器来调用。例如,一个解析器或者格式化函数。

    $setPristine();
      该方法用于设置控制到原始状态。
      该方法可以移除'ng-dirty'类并将控制恢复到原始状态('ng-pristine'类)。

    $cancelUpdate();
      该方法用于取消一次更新并重置输入元素的值以防止$viewCalue发生更新,它会由一个pending debounced事件引发或者是因为input输入框要等待一些未来的事件。

      如果你有一个使用了ng-model-options指令的输入框,并为它设置了debounced事件或者是类似于blur的事件,那么你可能会碰到在某一段时间内输入框中值和ngModel的$viewValue属性没有保持同步的情况。
      在这种情况下,如果你试着在debounced/future事件发生之前更新ngModel的$modelValue,你很有可能遇到困难,因为AngularJS的dirty cheching机制实际上并不会分辨一个模型究竟有没有发生变化。
      $cancelUpdate()方法应该在改变一个输入框的model之前被调用。
      记住,这很重要因为这能够确保输入字段能够被新的model值更新,而pending操作将会被取消。

    ngModelController中的属性

    $viewValue
      视图中的实际值

    $modelValue
      model中的值,它金额控制器绑定在一起

    $parsers
      将要执行的函数的数组,无论什么时候控制器从DOM中读取了一个值,它都将作为一个管道。其中的函数依次被调用,并将结果传递给下一个。最后出来的值将会被传递到model中。其中将包括验证和转换值的过程。

      对于验证步骤,这个解析器将会使用$setValidity方法,对于不合格的值将返回undefined。

    $formatters
      一个包含即将执行函数的数组,无论什么时候model的值发生了变化,它都会作为一个管道。其中的每一个函数都被依次调用,并将结果传递给下一个函数。该函数用于将模型传递给视图的值进行格式化。

    $viewChangeListeners
      只要视图的值发生变化,其中的函数就会被执行。其中的函数执行并不带参数,它的返回值也会被忽略。它可以被用在额外的#watches中。

    $error
      一个包含所有error的对象

    $pristine
      如果用户还没有进行过交互,值是true。

    $dirty
      如果用户已经进行过交互,值是true。

    $valid
      如果没有错误,值是true。

    $invalid
      如果有错误,值是true。


    指令与控制器交互和复用

    指令是用来复用的是用来生成UI组件的。







  • 相关阅读:
    apscheduler 踩坑
    fastapi 导出excel文件
    python flask 使用日志
    git 头指针游离问题
    C# 连接mysql填坑
    前端项目proxy小问题
    需完善--日志框架
    依赖<dependency>的scope了解
    git 退回到指定tag版本
    git切换远程仓库地址
  • 原文地址:https://www.cnblogs.com/wxlevel/p/6677838.html
Copyright © 2020-2023  润新知