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>