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 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
vue input标签通用指令校验的实现
Nov 05 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/06 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
利用jQuery解析获取JSON数据
2017/04/08 jQuery
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
express 项目分层实践详解
2018/12/10 Javascript
回顾Javascript React基础
2019/06/15 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
基于python的字节编译详解
2017/09/20 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
2014年新生军训方案
2014/05/01 职场文书
企业标语口号
2014/06/10 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
小学校园广播稿
2015/08/18 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python