AngularJS ngModel实现指令与输入直接的数据通信
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要介绍了AngularJS ngModel实现指令与输入直接的数据通信的相关资料,需要的朋友可以参考下
首先来看一下效果，在拖动input[range]的时候，狼蚁网站SEO优化的动画会随着拖动而发生改变，利用的原理就是ngModel实现的通信。实现的原理就是通过在指令中引入^ngModel来实现指令内部与外部之间的通信。
狼蚁网站SEO优化有几个点：
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实现指令与输入直接的数据通信的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！