首先來看一下效果，在拖動input[range]的時候，下面的動畫會隨著拖動而發生改變，利用的原理就是ngModel實現的通訊。實現的原理就是通過在指令中引入^ngModel來實現指令內部與外部之間的通訊。
下面有幾個點：
1、$formatters中push進去的函數實現modelValue轉成valeuValue。
2、$render方法實現把viewValue中的值渲染到模板中。
3、$setViewValue實現的是更新模板中的viewValue值。
4、$parsers中push進去的方法實現valueValue轉成modelValue。
<!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實現指令與輸入直接的資料通訊的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
