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


Posted in Javascript onSeptember 21, 2016

首先来看一下效果,在拖动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实现指令与输入直接的数据通信的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
javascript屏蔽右键代码
May 15 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
D3.js实现折线图的方法详解
Sep 21 #Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 #Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 #Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 #Javascript
D3.js实现柱状图的方法详解
Sep 21 #Javascript
AngularJS ng-style中使用filter
Sep 21 #Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 #Javascript
You might like
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP 编写的 25个游戏脚本
2009/05/11 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php递归json类实例
2014/12/02 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
解析Python编程中的包结构
2015/10/25 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
通信专业个人自我鉴定
2013/10/21 职场文书
优秀幼教自荐信
2014/02/03 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
劳资协议书范本
2014/04/23 职场文书
初中学生操行评语
2014/12/26 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
Python图片检索之以图搜图
2021/05/31 Python