ng-model是AngularJS的原生指令，通过require: 'ngModel'可以更加深入地处理数据的双向数据绑定。
ng-model里面的属性有：
$parsers：保存了从viewValue到modelValue绑定过程中的处理函数。
$formatters：保存了从modelValue到viewValue绑定过程中的处理函数。
$setViewValue：当AngularJS外部发生某件事情的时候，需要调用这个函数才能让AngularJS知道应该更新modelValue了。
$render：设定当model发生变化时该如何去更新view。
$setValidity：设置验证结果。
$viewValue：视图里的值。
$modelValue：模型里的值。
$parsers、$formatters和$setValidity的例子：
<!DOCTYPEhtml>
<htmlng-app="myModule">
<head>
<metacharset="utf-8">
</head>
<body>
<articleng-controller="myController">
<formname="myForm">
<inputtype="text"name="evenInput"ng-model="data.even"even>
<inputtype="text"ng-model="data.even"even>
<sectionng-show="myForm.evenInput.$error.even">
只能为偶数
</section>
</form>
</article>
<scriptsrc="../JS/angular.min.js"></script>
<scripttype="text/javascript">
angular.module('myModule',[])
.controller('myController',function(){
})
.directive('even',function(){
return{
require:'ngModel',link:function($scope,iElm,iAttrs,ngModelController){
ngModelController.$parsers.push(function(viewValue){//parser-语法分析器
if(viewValue%2===0){
ngModelController.$setValidity('even',true);//.$error.even为false
}else{
ngModelController.$setValidity('even',false);//.$error.even为true
}
returnviewValue;
});
ngModelController.$formatters.push(function(modelValue){
if(modelValue!==undefined){
modelValue=modelValue+'somewords';
}
returnmodelValue;
});
}
};
});
</script>
</body>
</html>
$setViewValue、$render和$viewValue的例子：
<!DOCTYPEhtml>
<htmlng-app="myModule">
<head>
<metacharset="utf-8">
</head>
<body>
<articleng-controller="myController">
<my-contentng-model="someText"></my-content>
<my-contentng-model="someText"></my-content>
</article>
<scriptsrc="../JS/angular.min.js"></script>
<scripttype="text/javascript">
angular.module('myModule',function(){
})
.directive('myContent',function(){
return{
restrict:'E',template:'<divcontenteditable="true"></div>',require:'ngModel',replace:true,ngModelController){
iElm.on('keyup',function(){
$scope.$apply(function(){
ngModelController.$setViewValue(iElm.html());
});
});
ngModelController.$render=function(){
iElm.html(ngModelController.$viewValue);
}
}
};
});
</script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。