依赖内置ng-model指令的自定义指令

前端之家收集整理的这篇文章主要介绍了依赖内置ng-model指令的自定义指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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的例子:

  1. <!DOCTYPEhtml>
  2. <htmlng-app="myModule">
  3.  
  4. <head>
  5. <Metacharset="utf-8">
  6. </head>
  7.  
  8. <body>
  9. <articleng-controller="myController">
  10. <formname="myForm">
  11. <inputtype="text"name="evenInput"ng-model="data.even"even>
  12. <inputtype="text"ng-model="data.even"even>
  13. <sectionng-show="myForm.evenInput.$error.even">
  14. 只能为偶数
  15. </section>
  16. </form>
  17. </article>
  18. <scriptsrc="../JS/angular.min.js"></script>
  19. <scripttype="text/javascript">
  20. angular.module('myModule',[])
  21. .controller('myController',function(){
  22.  
  23. })
  24. .directive('even',function(){
  25. return{
  26. require:'ngModel',link:function($scope,iElm,iAttrs,ngModelController){
  27. ngModelController.$parsers.push(function(viewValue){//parser-语法分析器
  28. if(viewValue%2===0){
  29. ngModelController.$setValidity('even',true);//.$error.even为false
  30. }else{
  31. ngModelController.$setValidity('even',false);//.$error.even为true
  32. }
  33. returnviewValue;
  34. });
  35. ngModelController.$formatters.push(function(modelValue){
  36. if(modelValue!==undefined){
  37. modelValue=modelValue+'somewords';
  38. }
  39. returnmodelValue;
  40. });
  41. }
  42. };
  43. });
  44. </script>
  45. </body>
  46.  
  47. </html>


$setViewValue、$render和$viewValue的例子:

  1. <!DOCTYPEhtml>
  2. <htmlng-app="myModule">
  3.  
  4. <head>
  5. <Metacharset="utf-8">
  6. </head>
  7.  
  8. <body>
  9. <articleng-controller="myController">
  10. <my-contentng-model="someText"></my-content>
  11. <my-contentng-model="someText"></my-content>
  12. </article>
  13. <scriptsrc="../JS/angular.min.js"></script>
  14. <scripttype="text/javascript">
  15. angular.module('myModule',function(){
  16.  
  17. })
  18. .directive('myContent',function(){
  19. return{
  20. restrict:'E',template:'<divcontenteditable="true"></div>',require:'ngModel',replace:true,ngModelController){
  21. iElm.on('keyup',function(){
  22. $scope.$apply(function(){
  23. ngModelController.$setViewValue(iElm.html());
  24. });
  25. });
  26. ngModelController.$render=function(){
  27. iElm.html(ngModelController.$viewValue);
  28. }
  29. }
  30. };
  31. });
  32. </script>
  33. </body>
  34.  
  35. </html>

猜你在找的设计模式相关文章