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 相关文章推荐
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
javascript关于继承解析
May 10 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
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
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
js调用flash的效果代码
2008/04/26 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
jQuery的框架介绍
2016/05/11 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
python文件与目录操作实例详解
2016/02/22 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
使用python实现多维数据降维操作
2020/02/24 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
优秀中专生推荐信
2013/11/17 职场文书
公司活动策划方案
2014/01/13 职场文书
工作表现评语
2014/01/19 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
公证委托书标准格式
2014/09/11 职场文书
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers