学习笔记-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 ...

随机推荐

cherry-pick多个commitid时的顺序说明
有的时候,我们在一个分支上提交了几个commit,然后我们会需要提交到其他分支上,一般情况下,我们会采用的merge的方式来合并分支,另外一种方式是只需要其中几个提交时,我们会cherry-pick到 ...
python 中为什么不需要重载参数*arg和**args
函数重载主要是为了解决两个问题. (1)可变参数类型. (2) 可变参数个数. 另外,一个基本的设计原则是,仅仅当两个函数除了参数类型和参数个数不同以外,其功能是完全相同的,此时才使用函数重载,如果两 ...
safari无法调试iphone提示“无可检查的应用程序”的解决方法
iphone上打开safari,随便访问一个网站,mac上通过Safari的开发,我的iphone是可以看到的.如果打开APP,就提示“无可检查的应用程序”. 解决方法使用XCode运行我们的App ...
Centos开机自启动脚本的制作
原文地址:http://www.2cto.com/os/201306/220559.html 我的一个Centos开机自启动脚本的制作一.切换到/etc/init.d/ 二.制作sh脚本 v ...
Oracle expdp impdp中 exclude/include 的使用
exclude和include参数能够在使用expdp或impdp是对特定的对象或对象类型进行筛选或过滤.比如因工作的需要导出特定的表或不导出特定的表.视图以及存储过程.索引.约束.授权统计信息等等. ...
Python 第五阶段学习记录之--- Web框架
什么是web服务器的原理是什么 Web框架本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env pyt ...
flask 定义数据库关系（多对多）
多对多我们使用学生和老师来演示多对多关系:每个学生有多个老师,每个老师有多个学生.多对多关系示意图如下: 在实例程序中,Student类表示学生,Teacher类表示老师.在这两个模型之间建立多对多 ...
文件上传时出现 Processing of multipart/form-data request failed. Unexpected EOF read on the socket错误
上传时一直出现这个错误,修改tomcat的server.xml文件,更改tomcat版本,也查阅了网上的很多解决办法,都不能解决问题. 后在stackoverflow的一篇文章上找到了解决方法: 加上 ...
HTTPS通信原理
https的实现原理https用到了多种加密算法来实现通信安全,其中两种基本的加解密算法类型解释如下:(1)对称加密:密钥只有一个,加密解密为同一个密码,且加解密速度快,典型的对称加密算法有DES ...
opencv学习之路（26）、轮廓查找与绘制（五）——最小外接矩形
一.简介二.轮廓最小外接矩形的绘制 #include "opencv2/opencv.hpp" using namespace cv; void main() { //轮廓最小外 ...

学习笔记-AngularJs（八）

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

随机推荐

热门专题