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小数计算出现近似值的解决办法
Feb 06 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 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实现的在线人员函数库
2008/04/09 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php安装swoole扩展的方法
2015/03/19 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
python中wheel的用法整理
2020/06/15 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
乡镇四风对照检查材料
2014/08/31 职场文书
迎七一演讲稿
2014/09/12 职场文书
工地材料员岗位职责
2015/04/11 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python