欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJS ngModel实现指令与输入直接的数据通信

程序员文章站 2022-10-18 16:45:20
首先来看一下效果，在拖动input[range]的时候，下面的动画会随着拖动而发生改变，利用的原理就是ngmodel实现的通信。实现的原理就是通过在指令中引入^ngmode...

首先来看一下效果，在拖动input[range]的时候，下面的动画会随着拖动而发生改变，利用的原理就是ngmodel实现的通信。实现的原理就是通过在指令中引入^ngmodel来实现指令内部与外部之间的通信。

下面有几个点：

1、$formatters中push进去的函数实现modelvalue转成valeuvalue。
2、$render方法实现把viewvalue中的值渲染到模板中。
3、$setviewvalue实现的是更新模板中的viewvalue值。
4、$parsers中push进去的方法实现valuevalue转成modelvalue。

AngularJS ngModel实现指令与输入直接的数据通信

<!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实现指令与输入直接的数据通信的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

上一篇： IT趋势预测：数据虚拟化将发挥巨大作用

下一篇： 美名其曰“优化大师”

推荐阅读