学习笔记-AngularJs（八）

在使用form.FormController和ngModel.NgModelController之前，先来学习一下怎么一个ng-model-options指令，觉得怎么这个指令挺好用的，我们知道ng-model是可以实现数据的双向绑定，至于双向数据绑定这个概念时必须要清楚的，都是这样的一个过程，view->scope和scope->view，只要双向绑定的element都是走怎么一个过程的，那么这个ng-model-options，就是可以实现对延迟更新、如何触发更新、时区（timezone针对input[type='date']等）等的控制，来看一下官网（http://t.cn/RUbL4rP这个不是，哈哈）的例子：

//github上的block-example/表单操作-11/ng-model-options.html
angular.module('optionsExample', [])

.controller('ExampleController', ['$scope', function($scope) {

  $scope.user = { name: 'say', data: '' };

  $scope.cancel = function(e) {

    if (e.keyCode == 27) {

      $scope.userForm.userName.$rollbackViewValue();

    }

  };

}]);

<div ng-controller="ExampleController">

  <form name="userForm">

    Name:

    <input type="text" name="userName"

           ng-model="user.name"

           ng-model-options="{ updateOn: 'blur',debounce: 1000 ,getterSetter: false  }"

           ng-keyup="cancel($event)" /><br />

    Other data:

    <input type="text" ng-model="user.data" /><br />

  </form>

  <pre>user.name = <span ng-bind="user.name"></span></pre>

</div>

updateOn：可以写入事件名字，将此element按所写事件触发更新

debounce：当我们写进keydowm事件的时候，我需要的是它尽可能说是当我输入完毕后，再去触发更新，那么这个时候我们可以延迟个1s！

getterSetter：为true的时候，则是指element的值是从函数return过来滴！

我们看一下这里， $scope.userForm.userName.$rollbackViewValue(); userForm、userName是什么鬼？眼尖的可以看到是表单的name和input[name='userName'],那么其实可以怎么理解表单实例可以随意地使用name属性暴露到scope中，于是在$scope就可以使用表单实例了，便可以使用表单控制器的属性和方法了！

form.FormController是啥？

FormController跟踪所有input和form的各种状态的控制,如被有效/无效/已交互/未交互。官网文档：http://docs.angularjs.cn/api/ng/type/form.FormController

其拥有的方法：

$rollbackViewValue(); $commitViewValue(); $addControl(); $removeControl(); $setValidity(); $setDirty(); $setPristine(); $setUntouched(); $setSubmitted();

$addControl() //添加ngModel controller ,ngModel会自动添加，除非自定义指令或许会用上
$removeControl() //与$addControl()相反
$setValidity() //在自定义表单检验有着很大作用

$rollbackViewValue() //这个我是这样理解的，回滚到上一个ViewValue

拥有的属性：

$pristine(form没被动过)  $dirty(form被动过) $valid(全部验证通过) $invalid(验证不通过) $submitted

$error

    email、max、maxlength、min、minlength、number、pattern、required、url、date、datetimelocal、time、week、month

给一个官网的例子（使用表单控制器的属性和方法怎么去验证input的正确性）：

//github上的block-example/表单操作-11/ng-form.html，其它类型的input[type=*]验证也都更新到github了

<!doctype html>

<html ng-app='formExample'>

    <head>

        <meta charset="utf8"/>

        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

        <style>

         .my-form {

           -webkit-transition:all linear 0.5s;

           transition:all linear 0.5s;

           background: transparent;

         }

         .my-form.ng-invalid {

           background: red;

         }

        </style>

        <script>

          angular.module('formExample', [])

            .controller('FormController', ['$scope', function($scope) {

              $scope.userType = 'guest';

              $scope.email = '739288994@qq.com';

              var list = $scope.list = [];

              $scope.submit = function() {

                     if($scope.userType){ list.push(this.userType);}

                     if($scope.email){  list.push(this.email);}

                      // console.log(this.userType+","+this.email);

                      // console.log($scope.list);

                  };

            }]);

        </script>

    </head>

    <body>

        <!--表单控制器-->

        <form name="myForm" ng-submit="submit()"  ng-controller="FormController" class="my-form" >

          userType: <input name="input" type="text" ng-model="userType" required>

          <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>  <!--这里的意思是没有填的话就会显示-->

          email:  <input name="email" type="email"  ng-model="email">

                <span class="error" ng-show="myForm.email.$error.email">Wrong Email!</span>

          <br>

          <input type="submit" value="提交" id="submit" />

          <tt>userType = {{userType}}</tt><br>

          <tt>email = {{email}}</tt><br>

          <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br> <!--表单的input的有效为true-->

          <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br> <!--表单的input的$error-->

          <tt>myForm.email.$valid = {{myForm.email.$valid}}</tt><br> <!--表单的input的有效为true-->

          <tt>myForm.email.$error = {{myForm.email.$error}}</tt><br> <!--表单的input的$error-->

          <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br>

          <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>  <!--$error属性的required-->

          <tt>myForm.$valid = {{myForm.$valid}}</tt><br>        <!--有效效为true-->

          <tt>myForm.$invalid = {{myForm.$invalid}}</tt><br>    <!--无效为true-->

          <tt>myForm.$pristine= {{myForm.$pristine}}</tt><br>   <!--与表单有相互作用为true-->

          <tt>myForm.$dirty= {{myForm.$dirty}}</tt><br>   <!--与表单无相互作用为true-->

          <tt>myForm.$submitted = {{myForm.$submitted}}</tt><br>

          <tt>提交的数据：{{list|json}}</tt>

         </form>

    </body>

</html>

<!-- If the name attribute is specified, the form controller is published onto the current scope under this name. -->

<!--表单阻止了表单默认action提交的方式，改用ng-submit或ng-click对表单进行绑定，具体操作看列子-->

<!-- <form [name=""]>...</form> 等价于 <div ng-form='##'></div> 控制器为name属性的值 -->

具体可以看代码！

ngModel.NgModelController是啥？

NgModelController 为ngModel指令提供了API。该控制器包含数据双向绑定服务、验证、Value格式化和解析、CSS更新。它不包含任何逻辑处理DOM渲染或DOM event，这样的DOM相关逻辑应使用其他指令,NgModelController用来控制元素的数据绑定。Angular默认提供许多关于input元素 DOM逻辑处理。官网文档：http://docs.angularjs.cn/api/ng/type/ngModel.NgModelController

其拥有的方法：

$render(); $isEmpty(value); $setValidity(validationErrorKey, isValid); $setPristine(); $setDirty(); $setUntouched(); $setTouched(); $rollbackViewValue(); $validate(); $commitViewValue(); $setViewValue(value, trigger);

$render： angular 会把 $modelValue 经过 $formatters 得出来的值放入 $viewValue中，(这时 $viewValue = $modelValue 经过 $formatters) 然后触发我们写好的 $render . 跟着$setViewValue(value, trigger);一起使用。

$setViewValue：scope改变$modelValue，使用$setViewValue(),改变$viewValue

$setValidity：使用这个配合$parsers可以实现表单自定义验证

拥有的属性：

$viewValue  //界面显示的数据

$modelValue  //$scope上面的value

$parsers  //在view->model的时候会触发的一个函数组，无论什么时候Model发生改变，所有的ngModelController.$formatters(model发生改变时触发数据有效验证和格式化转变)数组中的function将排队执行，所以在这里每一个function都有机会去格式化model的值，并且通过NgModelController.$setValidity修改空间的验证状态。

$formatters //在model->view的时候会触发的一个函数组，无论任何时候用户与控件发生交互，将会触发NgModelCtroller.$setViewValue。这时候轮到执行NgModelController.$parsers(当控件从dom取值之后，将会执行这个数组中的所有方法，对值进行审查过滤或转换，也进行验证)数组中的所有方法。

$validators 
$asyncValidators 
$viewChangeListeners 
$error 
$pending 
$untouched 
$touched 
$pristine 
$dirty 
$valid 
$invalid 
$name

那么多个属性都差不多，是不是关系很密切勒！双向绑定的机制可以在$parsers和$formatters可以体现出来，通过这些我们可以在view->scope做类似表单验证（自定义）的功能（配合$setValidity(validationErrorKey, isValid);），scope->view数据格式自定义等操作（配合$setViewValue(value, trigger);），可以看一下下面的这个例子(https://github.com/xiaobin5201314/AngularJS-Learning/blob/master/block-example/表单操作-11/ng-model.html)：

var custom = angular.module('customControl', ['ngSanitize']);

custom.directive("noxiaobin", function () {
return {
restrict: "A",
require: "?ngModel",
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.push(function (v) { //传说中的验证器

if (v != "xiaobin") {
ngModel.$setValidity('noxiaobin', true); //通过获取从dom过来的值，然后进行验证，使用$setValidity('noxiaobin', true);改变noxiaobin的值，然后反馈会dom
return v;
} else {
ngModel.$setValidity('noxiaobin', false);
return undefined;
}

});
}
}
});

custom.directive('contenteditable', ['$sce', function($sce) {
return {
restrict: 'A', //指定该指令是为属性类型的指令
require: '?ngModel', // 与ngModel指令的相互交流
link: function(scope, element, attrs, ngModel) { //scope分别是指令作用的作用域，element触发指令的元素，attrs是element的属性集合，ngmodel是控制器就是引入的ngModel
if (!ngModel) return;

// output data to the view
ngModel.$render = function() {
element.html($sce.getTrustedHtml(ngModel.$viewValue || '')); //$viewValue的值进行format
};

//对element的监听
element.on('blur keyup change', function() {
scope.$evalAsync(read); //执行read方法
});
read(); // 初始化

// Write data to the model
function read() {
var html = element.html();
// When we clear the content editable the browser leaves a <br> behind
// If strip-br attribute is provided then we strip this out
if ( attrs.stripBr && html == '<br>' ) {
html = '';
}

ngModel.$setViewValue(html); //获取ViewValue，设置$viewValue
}

}
};
}]);

    <form name="myForm">

         <div contenteditable

              name="myWidget" ng-model="userContent"

              strip-br="true"

              required>点击编辑</div>

          <span ng-show="myForm.myWidget.$error.required">Required!</span>

          <input type="text" name="email" ng-model="email" noxiaobin />

          <span ng-show="myForm.email.$error.noxiaobin">Value nerver have xiaobin!</span>

         <hr>

         <textarea ng-model="userContent"></textarea>

    </form>

以上有两个指令分别是

1、view->scope，配合$setValidity(validationErrorKey, isValid);进行表单验证，通过反馈回view的noxiaobin来判断是否显示

2、scope->view，使用$setViewValue(value, trigger);设置view的值，然后触发$render,对其进行格式化

3、代码下载：https://github.com/xiaobin5201314/AngularJS-Learning

对于ngModel.NgModelController确实有些绕，也有些地方还是不懂，不过也有些文章写得还是比较明晰的，如：http://sentsin.com/web/659.html，如果对ngModel.NgModelController有那些更加全，或是更加详细的资料可以拿给我学习学习！！！

学习笔记-AngularJs（八）的更多相关文章

学习笔记-AngularJs（十）
前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...
VSTO学习笔记（八）向 Word 2010 中写入表结构
原文:VSTO学习笔记(八)向 Word 2010 中写入表结构前几天公司在做CMMI 3级认证,需要提交一系列的Word文档,其中有一种文档要求添加公司几个系统的数据库中的表结构.我临时接到了这项 ...
Python学习笔记（八）
Python学习笔记(八): 复习回顾递归函数内置函数 1. 复习回顾 1. 深浅拷贝 2. 集合应用: 去重关系操作:交集,并集,差集,对称差集操作: 定义 s1 = set('alvin ...
学习笔记-AngularJs（九）
到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...
python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置
python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置Download JetBrains Python IDE :: PyCharmhttp://www. ...
学习笔记-AngularJs（七）
在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json ...
学习笔记-AngularJs（六）
在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了 ...
学习笔记-AngularJs（三）
学习笔记-AngularJs(二)写了个所有程序语言入门时都必须要写的Hello World,那么从现在开始做那个之前说过的互联网大佬介绍的学习例子,当然这里开始会慢慢按照之前说过的目录来搭建这个学习 ...
学习笔记-AngularJs（二）
在接下来学习angularjs中,我按照的就是之前学习笔记-AngularJs(一)所讲的目录来搭建一个学习的项目,做一个互联网大佬人物简介的例子,当然也可以使用angualrjs上面提供的官方例子 ...
Directx11学习笔记【八】龙书D3DApp的实现
原文:Directx11学习笔记[八] 龙书D3DApp的实现 directx11龙书中的初始化程序D3DApp跟我们上次写的初始化程序大体一致,只是包含了计时器的内容,而且使用了深度模板缓冲. D3 ...

随机推荐

小程序自定义tabBar，动态控制tabBar
最近做项目的时候,突然来了个小特殊的需求,根据客户的类型来动态显示底部的tabBar菜单.当时我就有点小懵逼了,这个不是小程序自带的组件么?还要做成动态?这就有点尴尬了..... 不过也只是一时尴尬而 ...
使用maven搭建springMVC开发环境
1.引入框架所需的包,pom.xml文件中添加如下配置: <dependency> <groupId>org.springframework</groupId> & ...
十、无事勿扰，有事通知（1）——NSNotification
概述很久很久以前,有一只菜鸟正在美滋滋的撸着他的嵌入式C代码.然而有一天,老板对菜鸟说:“别撸C了,从现在开始你就写swift开发ios了.”菜鸟一脸懵逼,但还是照做了. 又有一天,菜蛋谄媚的对菜鸟 ...
《linux就该这么学》第五节课，shell脚本的各种语句！
第四章shell语句 (据课本和虚拟机实验排版,借鉴请改动) 4.2:shell脚本脚本包括:脚本声明,脚本注释,脚本内容和命令例:#!/bin/bash ...
Oracle sqlplus的输出表的排版，数据表发生折行问题
当查寻数据表的时候,会发生折行的问题这时,我们可以用下面的语句设置每行显示的记录长度:set linesize 300; ---> 每行显示300个字符. 设置每页显示的 ...
Pycharm激活方法步骤
Pycharm激活步骤第一步:找到hosts文件先按下键盘的win + r ,然后复制c:\windows\system32\drivers\etc粘贴到对话框回车打开文件管理器第二步:修改ho ...
.Net 多线程 (1) Task
多线程是一种有效提高程序工作效率的方法.当然为了效率需要使用更多的cpu,内存等资源. 并发是两个队列交替使用一台咖啡机,并行是两个队列同时使用两台咖啡机,如果串行,一个队列使用一台咖啡机,那么哪怕前 ...
flask 定义数据库关系（多对多）
多对多我们使用学生和老师来演示多对多关系:每个学生有多个老师,每个老师有多个学生.多对多关系示意图如下: 在实例程序中,Student类表示学生,Teacher类表示老师.在这两个模型之间建立多对多 ...
wget下载阿里云RDS备份集
[root@localhost tmp]# more wget.sh #!/bin/bash download_url=`python /tmp/geturl.py` echo $download_u ...
Codeforces 438E The Child and Binary Tree - 生成函数 - 多项式
题目传送门传送点I 传送点II 传送点III 题目大意每个点的权值$c\in {c_{1}, c_{2}, \cdots, c_{n}}$,问对于每个$1\leqslant s\leqslant ...

学习笔记-AngularJs（八）

学习笔记-AngularJs（八）的更多相关文章

随机推荐

热门专题