Angular 学习系列 - - form.FormController、ngModel.NgModelController
form.FormController
FormController跟踪所有他所控制的和嵌套表单以及他们的状态，就像有效/无效或者脏值/原始。
每个表单指令创建一个FormController实例。
方法：
$addControl();
给表单注册一个控制器。
使用了ngModelController的输入元素会在连接时自动执行。
$removeControl();
给表单注销一个控制器。
使用了ngModelController的输入元素会在注销时自动执行。
$setValidity();
给表单设置表单控制器的有效性。
此方法也将传播到父表单。
$setDirty();
给表单设置一个脏状态。
这个方法将被调用去添加类“ng-dirty”，给表单设置一个脏状态。这个方法将传到父表单。
$setPristine();
将表单设置为原始状态。
这种方法被调用去删除类“ng-dirty”，给表单设置初始状态。这个方法将传到父表单。
属性:
$pristine
如果用户和表单尚未进行交互，则为true。
$dirty
如果用户和表单已进行交互，则为true。
$valid
所有的表格和控制器都是验证有效，则为true。
$invalid
如果至少有一个控件或表单验证无效，则为true。
$error
是一个hash对象，包含引用无效的控制器或表单。
ngModel.NgModelController
ngModel.NgModelController为ng-model指令提供了API。该控制器包含数据绑定，验证，CSS更新服务，和值的格式化和解析。它很明确的不包含任何逻辑处理，DOM渲染或者监听事件。这种的DOM相关的逻辑应该由其他使用NgModelController进行数据绑定指令提供。
方法：
$render();
当视图需要更新时调用。
$isEmpty(value);
当我们需要判断input的值是否为空时可执行。例如， input的值是否存在，则需要的指令执行此函数。默认的$isEmpty函数检查值是否是“undefined”、“”、null或者NaN。
Value：检查的引用。
$setValidity(validationErrorKey,isValid);
改变有效性的状态，并通知表单当控制器的有效性发生变化。（如果验证器已经被标记为无效，则不通知表单。）
在需要验证的时候这种方法被调用---即分析器或格式化功能。
validationErrorKey：验证器的名称。validationErrorKey将会被分配给$error[validationErrorKey ] =isValid，这样就可以进行数据绑定了。
isValid：当前状态是否是valid（true）或者invalid（false）。
$setPristine();
设置控制器初始化状态。
$setViewValue(value);
更新页面的值。
当页面上的值发生变化时，这个方法被调用。
value：页面上的值。
属性：
$viewValue
页面上实际的字符串值。
$modelValue
模型中控制器绑定的的该值。
$parsers
执行的功能的数组，作为一个控制器从DOM读取值的管道。每一个函数被调用去传递值到下一个，最后返回值用于填充模型。用于净化/转换或者验证值。为了验证，解析器应该使用$setvalidity()更新有效状态，并返回未定义的无效值。
$formatters
执行的功能的数组，作为一个控制器从DOM读取值的管道。每一个函数被调用去传递值到下一个，最后返回值用于填充模型。用于的格式化/转换在控制器和验证中显示的值。
$viewChangeListeners
当页面上值变化时所执行的函数的数组。它没有参数被执行，它的返回值被忽略。这可以用来代替对模型值额外的监听。
$error
带有所有错误的hash对象。
$pristine
用户还没有与控制器交互，则为true。
$dirty
用户已经与控制器交互，则为true。
$valid
如果没错误，则为true。
$invalid
控制器上至少有一个错误，则为true。
使用代码：
div[contenteditable] { border: 1px solid black; background-color: white; min-height: 24px; width: 200px; margin-top: 20px; }.myDiv { float: left; display: block; margin-left: 30px; }Hello World!(function () {angular.module("Demo", ["ngSanitize"]).directive("contentEditable", contentEditable).controller("testCtrl",angular.noop);function contentEditable() { return {restrict: "A",require: "?ngModel",link: function (scope, element, attrs, ngModel) { if (!ngModel) return;ngModel.$render = function () {element.html(ngModel.$viewValue || "");};element.on("blur keyup change", function () {scope.$apply(read);});read(); function read() { var html = element.html(); if (attrs.stripBr && html == "上面对于FormController的那些属性，可以作为angular表单验证的判断。对于下面的NgModelController，用的不多，不过几个方法和属性在指令中还是挺方便使用的，感觉这种操作也和jquery操作相似。
转载于:https://my.oschina.net/yeshou/blog/615044
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！