Angular.js通过自定义指令directive实现滑块滑动效果
时间:2019-04-07
本文章向大家介绍Angular.js通过自定义指令directive实现滑块滑动效果,主要包括Angular.js通过自定义指令directive实现滑块滑动效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
最近因为工作需要让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现。
那么angular如何实现呢,我用的是自定义指令(directive)。
方法如下
1.下面是我html部分代码,detail-scroll是我自定义的标签
............... <div id="time" style="position: relative;"> <div ng-style="maskStyle" detail-scroll style="transition: all linear 0.5s;-moz-transition:all linear 0.5s;-webkit-transition: all linear 0.5s;-o-transition: all linear 0.5s;"> <div ng-click="maskTimeDetail()"> <i class="zmdi zmdi-zoom-in" style="font-size: 22px;color: #fff;padding: 5px;"></i> </div> </div> <div class="tl-item alt" ng-repeat="time in timeList"> //..................... </div> </div>
2.开始写js代码
这里假设我们在某一个module下,控制器叫做AppCtrl
angular.module('xxxx',[ ]) .controller('AppCtrl', ['$scope',AppCtrl]) .directive('detailScroll',function(){ // 返回一个函数 return{ link : function($scope,element,attr){ var container = angular.element(window); var timeH = $('#time').offset().top;//获取该部分距离页面顶部距离 container.on('scroll', function() { if(container.scrollTop()>timeH){ $scope.maskStyle.top = container.scrollTop()-timeH+$('#time .alt').eq(0).height()/2+'px'; } }); }, restrict:'A', //ECMA E元素 C类名 M注释 A属性 }; }); function AppCtrl($scope) { //这是我给这个滑块定义的样式,一定要记住你要相对应你的父级元素相对定位, //因为我们要改变是它的top值 $scope.maskStyle={ width: '30px',height: '30px', 'background-color': '#ea1c0d', 'z-index': 999, position: 'absolute', top:0,left:0, opacity:'0.8', 'text-align':'center' }; }
detailScroll是 angular命名规范,驼峰式,一定要这样写,angular只有用自定义指令,才可以用jquery的一些方法。。
以上只是个简单的例子来演示一下,如果滑块移动的top值不准确,可以自行计算。
这只是简单的自定义指令写法,还有一个是可以引入模板
angular.module('app', []) .directive('myDirective', function() { function appCtrl($scope){ //处理逻辑 } return { restrict: 'EA', replace: true, scope:{ //想要从父级controller传到这里的函数,对象,变量,分别用(&,=,@),具体怎么用大家可以参考angular官网详解 } templateUrl:'路径或是html拼接的字符串', controller: function($scope, $element, $attrs, $transclude) { // 控制器逻辑 } //controller这样写也可以,还有一种直接写controller名,通过注入的方法,比如 controller:['$scope',appCtrl] } })
可以参考这个//www.jb51.net/article/107045.htm,很详细~~~
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- 英特尔放出Linux微代码以修复Meltdown和Spectre漏洞
- python基础(5):深入理解 python 中的赋值、引用、拷贝、作用域
- Linux SSH密码暴力破解技术及攻防实战
- 西部数据NAS设备被曝存在硬编码后门和未授权文件上传高危漏洞
- Hive & Performance 学习笔记
- 任意用户密码重置(一):重置凭证泄漏
- linux 系统监控、诊断工具之 top 详解
- 一个二进制POC的诞生之旅CVE-2018-0802
- 远程RPC溢出EXP编写实战之MS06-040
- 浮点数加法引发的问题:浮点数的二进制表示
- 新手科普 | MySQL手工注入之基本注入流程
- linux 系统监控、诊断工具之 lsof 用法简介
- 关于 SimpleDateFormat 的非线程安全问题及其解决方案
- 关于 WEB/HTTP 调试利器 Fiddler 的一些技巧分享
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 生产者消费者模式的三种实现方式
- java中的阻塞队列
- java虚拟机
- 重构:保持Dockerfile整洁的5个技巧
- spring boot启动过程
- 如何构造jvm的堆溢出和栈溢出
- 一日一技:导入父文件夹中的模块并读取当前文件夹内的资源
- Matpotlib绘图遇到时间刻度就犯难?现在,一次性告诉你四种方法
- Windows NetLogon权限提升漏洞(CVE-2019-1424) 复现
- 源码解析:Git的第一个提交是什么样的?
- 终于搞懂,为什么 Java 的 main 方法必须是 public static void?
- Spring Boot 多版本更新,紧急修复 RFD 安全漏洞
- 【查找】折半查找/二分查找
- Kubernetes 1.19.0——密码管理
- centos 安装软件的方法