首先，我们来看看效果。拖动输入[范围]时，以下动画会随着拖动而改变。所使用的原理是由ngModel实现的通信。实现原理是通过将^ngModel引入到教学中，实现教学内外的交流。

下面有几点：

1.$formatters中的函数push实现了modelValue到valeuValue的转换。2.$render方法实现了将视图值中的值呈现给模板。3.$setViewValue更新模板中的视图值。4.$ parsers中的push方法实现了valueValue到modelValue的转换。

！DOCTYPE html html lang=' en ' ng-app=' rangeApp ' head meta charset=' UTF-8 ' title/title/head script src=' http : lib/angular。量滴js ' type=' text/JavaScript '/script script src=' http : lib/jquery-2。1 .4 .量滴js ' type=' text/JavaScript '/script style div { position 3360 absolute；} .ani {宽度： 200像素高度： 200像素；border: 1px固体水；绝对位置：top : 100 pxleft : 200 px-web套件-transform : Rotatex(120度)；-moz-transform : Rotatex(120度)；-ms-transform : Rotatex(120度)；-o型变压器： Rotatex(120)；变压器： Rotatex(20度);} .活动{ background:红色；} :-web套件-滑块-可运行-轨道{ border : 1px solid # a03b D6；背景： # f0f3f 9 } :-网络套件-滑块-拇指{ outline : 1px虚线# a03b D6；背景色： # 34538 b；} :-web kit-slider-runnable-track :悬停{ background-color : # cad5eb} :-moz-range-track { border : 1px solid # a03b D6；height : 20pxbackground : # f0f3f 9 } :-moz-range-thumb { background : # 34538 b；height : 30px } :-ms-fill-low {背景：橙色；} :-ms-fill-upper {背景：绿色；} :-ms-thumb {背景：红色；} :-ms-ticks-before { display : block；颜色：黑色；} :-ms-ticks-after { display : block；颜色：蓝色；} :-ms-track { padd : 5px；} :-ms-tooltip {显示：无；/* 数值提示只能是显示或可视性*/}/style body ng-controller=' range con '输入类型=' range ' ng-model=' range model '/animate-span ng-model=' range model '/animate-span/body script var app=angular。模块('范围应用'，[]).控制器(' rangeCon '，['$scope '，函数($ scope){ $ scope。靶场型号=30；}]) .指令(' animateSpan '，function(){ return { restrict : ' ea ',replace:true,scope:{},require:'^ngmodel',template : ' div span class=' ani ' ng-model=' dis ' { dis } }/span/div '，link: function(作用域，元素，attr，ng模型控制器){ var rotatex=function(模型值){ var model value=par int(模型值)| | 0；定义变量值=' rotateX '(模型值* 3 ' deg ')；返回{ dis :值}；};var rotateY=函数(模型值){ var模型值=parsent(模型值)| | 0；定义变量值='rotateY(' modelValue*3 'deg ')返回{ dis : value } } var rotateZ=function(模型值){ var model value=parsent(模型值)| | 0；定义变量值=' rotateZ '(模型值* 3 ' deg ')；返回{ dis : value } }//作用域。dis=30ngModelController .$ formatters。push(Rotatez)；//modelValue到viewValeu之间的通信模型控制器$render=function () {//把视图模型渲染到模板中scope.dis=ngModelController .$ viewValue.dis$(元素)。查找(' span ').css('-webkit-transform '，作用域。dis)}；范围$watch('dis '，function () {//更新模板上的视图值模型控制器$ SetViewValue({ dis :作用域。dis })})}))/script/html以上就是对angularngmmodel实现指令与输入直接的数据通信的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！