AngularJS ngModel实现指令与输入直接的数据通信
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
首先来看一下效果,在拖动input[range]的时候,下面的动画会随着拖动而发生改变,利用的原理就是ngModel实现的通信。实现的原理就是通过在指令中引入^ngModel来实现指令内部与外部之间的通信。
下面有几个点:
1、$formatters中push进去的函数实现modelValue转成valeuValue。
2、$render方法实现把viewValue中的值渲染到模板中。
3、$setViewValue实现的是更新模板中的viewValue值。
4、$parsers中push进去的方法实现valueValue转成modelValue。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | <!DOCTYPE html> <html lang= "en" ng-app= "rangeApp" > <head> <meta charset= "UTF-8" > <title></title> </head> <script src= "lib/angular.min.js" type= "text/javascript" ></script> <script src= "lib/jquery-2.1.4.min.js" type= "text/javascript" ></script> <style> div{ position: absolute; } .ani{ width: 200px; height: 200px; border: 1px solid aqua; position: absolute; top: 100px; left: 200px; -webkit-transform: rotateX(120deg); -moz-transform: rotateX(120deg); -ms-transform: rotateX(120deg); -o-transform: rotateX(120deg); transform: rotateX(20deg); } .active{ background: red; } ::-webkit-slider-runnable-track { border: 1px solid #a0b3d6; background: #f0f3f9; } ::-webkit-slider-thumb { outline: 1px dotted #a0b3d6; background-color: #34538b; } ::-webkit-slider-runnable-track:hover { background-color: #cad5eb; } ::-moz-range-track { border: 1px solid #a0b3d6; height: 20px; background: #f0f3f9; } ::-moz-range-thumb { background: #34538b; height: 30px; } ::-ms-fill-lower { background: orange; } ::-ms-fill-upper { background: green; } ::-ms-thumb { background: red; } ::-ms-ticks-before { display: block; color: black; } ::-ms-ticks-after { display: block; color: blue; } ::-ms-track { padding: 5px; } ::-ms-tooltip { display: none; /* 数值提示 只能是display或visibility */ } </style> <body ng-controller= "rangeCon" > <input type= "range" ng-model= "rangeModel" /> <animate-span ng-model= "rangeModel" ></animate-span> </body> <script> var app=angular.module( "rangeApp" ,[]) .controller( "rangeCon" ,[ "$scope" , function ($scope) { $scope.rangeModel=30; }]) .directive( "animateSpan" , function () { return { restrict: 'EA' , replace: true , scope:{}, require: '^ngModel' , template: '<div><span class="ani" ng-model="dis">{{dis}}</span></div>' , link: function (scope,element,attr,ngModelController) { var rotateX= function (modelValue) { var modelValue=parseInt(modelValue)||0; var value= "rotateX(" +modelValue*3+ "deg)" ; return { dis:value }; }; var rotateY= function (modelValue) { var modelValue=parseInt(modelValue)||0; var value= "rotateY(" +modelValue*3+ "deg)" return { dis:value } }; var rotateZ= function (modelValue) { var modelValue=parseInt(modelValue)||0; var value= "rotateZ(" +modelValue*3+ "deg)" ; return { dis:value } }; //scope.dis=30; ngModelController.$formatters.push(rotateZ); //modelValue到viewValeu之间的通信。 ngModelController.$render= function () { //把viewModel渲染到模板中 scope.dis=ngModelController.$viewValue.dis; $(element).find( "span" ).css( "-webkit-transform" ,scope.dis) }; scope.$watch( 'dis' , function () { //更新模板上的viewValue ngModelController.$setViewValue({ dis:scope.dis }) }) } } }) </script> </html> |
以上就是对AngularngModel实现指令与输入直接的数据通信的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
本文分步骤给大家介绍了在 Angular6 中使用 HTTP 请求服务端数据的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
这篇文章主要介绍了在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法,需要的朋友可以参考下2018-11-11AngularJS定时器的使用与移除操作方法【interval与timeout】
这篇文章主要介绍了AngularJS定时器的使用与移除操作方法,结合实例形式分析了AngularJS中interval与timeout方法的相关使用技巧,需要的朋友可以参考下2016-12-12Angular.js前台传list数组由后台spring MVC接收数组示例代码
这篇文章主要给大家介绍了关于Angular.js前台传list数组之后,由后台spring MVC接收数组的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
最新评论