zoukankan      html  css  js  c++  java
  • 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组件的。







  • 相关阅读:
    poj 2411 Mondriaan's Dream 骨牌铺放 状压dp
    zoj 3471 Most Powerful (有向图)最大生成树 状压dp
    poj 2280 Islands and Bridges 哈密尔顿路 状压dp
    hdu 3001 Travelling 经过所有点(最多两次)的最短路径 三进制状压dp
    poj 3311 Hie with the Pie 经过所有点(可重)的最短路径 floyd + 状压dp
    poj 1185 炮兵阵地 状压dp
    poj 3254 Corn Fields 状压dp入门
    loj 6278 6279 数列分块入门 2 3
    VIM记事——大小写转换
    DKIM支持样本上传做检测的网站
  • 原文地址:https://www.cnblogs.com/wxlevel/p/6677838.html
Copyright © 2011-2022 走看看