在本篇博文中，我们将接触angular的验证。angular的验证是由form 指令和ngModel协调完成的。今天博主在这里想要说的是在验证在的一种特殊情况，当验证控件没有没有name属性这是不会被form捕获的。或者是你希望在ngRepeat中使用动态表达式。
下面且让我们先来从angular源码中看起如下：
首先是ngModel:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var
ngModelDirective =
function
() {
return
{
require: [
'ngModel'
,
'^?form'
],
controller: NgModelController,
link:
function
(scope, element, attr, ctrls) {
// notify others, especially parent forms
var
modelCtrl = ctrls[0],
formCtrl = ctrls[1] || nullFormCtrl;
formCtrl.$addControl(modelCtrl);
scope.$on(
'$destroy'
,
function
() {
formCtrl.$removeControl(modelCtrl);
});
}
};
};
|
从上面我们能够看出ngModel指令会在编译时期的post link阶段会通过form的 addControl方法把自己的controller注册到父节点上的form的formController中。
在看看ngModel controller初始化代码：
var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$parse', function($scope, $exceptionHandler, $attr, $element, $parse) { .... this.$pristine = true; this.$dirty = false; this.$valid = true; this.$invalid = false; this.$name = $attr.name;
我们从上面我们可以看到 ngModel的$name属性并不支持表达式计算。
而FormController的addControl代码则是：
/** * @ngdoc function * @name ng.directive:form.FormController#$addControl * @methodOf ng.directive:form.FormController * * @description * Register a control with the form. * * Input elements using ngModelController do this automatically when they are linked. */ form.$addControl = function(control) { // Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored // and not added to the scope. Now we throw an error. assertNotHasOwnProperty(control.$name, 'input'); controls.push(control); if (control.$name) { form[control.$name] = control; } };
从上面我们可以清楚的看见虽然ngModel注册了自己，但是这里也不一定能注册成功，ngModel心必须有自己的$name才能被注册成功。
从上面的代码中可以得出，当我们的验证失效的时候，我们可以有一个万能的方式就是 手动注册到form controller
手动注册form controller
为了我写了一个dy-name的插件，其会在post link阶段解析表达式，并把自己注册到父form controller。
如下：
.directive("dyName", [
function() {
return {
require: "ngModel",
link: function(scope, elm, iAttrs, ngModelCtr) {
ngModelCtr.$name = scope.$eval(iAttrs.dyName)
var formController = elm.controller('form') || {
$addControl: angular.noop
};
formController.$addControl(ngModelCtr);
scope.$on('$destroy', function() {
formController.$removeControl(ngModelCtr);
});
}
};
}
])
使用方式:<div ng-repeat="item in demo.fields"> <div class="control-group"> <label class="control-label"> : </label> <div class="controls"> <input type="number" dy-name="item.field" ng-model="demo.data[item.field]" min="10" max="500" ng-required="true"/> </div> </div> </div>
其实实现为在post link阶段获取到form controller，并把自己注册到form controller，而且为了消除对象的级联，将会在scope摧毁阶段remove自己。
其效果请看jsbin $addControl
注意:在formController.$addControl方法的参数传入的不是界面控件，而是ngModelController.或者名字为$addController更合适。
本文转自破狼博客园博客，原文链接：http://www.cnblogs.com/whitewolf/p/3560418.html，如需转载请自行联系原作者
