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插件简单实现代码
Apr 19 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
在vue中使用console.log无效的解决
Aug 09 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
PHP 选项及相关信息函数库
2006/12/04 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
Node.js实现文件上传
2016/07/05 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python3简单实现微信爬虫
2015/04/09 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python识别验证码图片实例详解
2020/02/17 Python
python中列表的含义及用法
2020/05/26 Python
Python实现画图软件功能方法详解
2020/07/28 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
田径运动会通讯稿
2015/07/18 职场文书
运动会开幕式致辞
2015/07/29 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang