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 相关文章推荐
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
javascript回到顶部特效
Jul 30 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
Webpack3+React16代码分割的实现
Mar 03 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
token 机制和实现方式
2020/12/15 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
应届护士推荐信
2013/11/16 职场文书
劳动模范事迹材料
2014/01/19 职场文书
运动会邀请函范文
2014/02/06 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
土建工程师岗位职责
2014/06/10 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
小班教师个人总结
2015/02/05 职场文书
学生个人总结范文
2015/02/15 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
七年级作文之雪景
2019/11/18 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android