angularJs自定义指令(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]
} })
可以参考这个https://segmentfault.com/a/1190000005851663,很详细~~~
最新文章
- C# 有关打印机的连接判断...随便看看
- Css Study - 纵向Menu - By html and Css
- [Chapter 3 Process]Practice 3.3 Discuss three major complications that concurrent processing adds to an operating system.
- nyist 604 小明的难题
- JavaScript继承学习笔记
- 6、Android中的NFC技术
- JS函数式编程【译】2.2 与函数共舞
- nginx rewrite 参数和例子
- yum安装lamp环境
- System.currentTimeMillis();
- sublime3 插件pylinter的安装
- ofbiz学习笔记
- PHP获取当前页面完整的URL
- time函数获取时间与本地时间不一致
- spring MVC上传附件
- Runtime那些事
- Scrapy 框架流程详解
- Tomcat Getshell
- 解决ssh连接慢,挂起在SSH2_MSG_SERVICE_ACCEPT信息之后很久的问题
- 拥抱了IDEA却发现再也回不去Eclipse...
热门文章
- libcurl以get方式请求服务器端文件
- DuiLib笔记之Control常用属性
- Git配置的用户名密码在本地的存贮位置
- 关于 josnp ,解决跨域问题
- hdu-5753 Permutation Bo(概率期望)
- 「UOJ#117」 欧拉回路
- MVC 登录后重定向回最初请求的 URL FormsAuthentication.RedirectFromLoginPage
- jquery easyui 实战总结
- Windows 下有什么软件能够极大地提高工作效率
- 再谈使用X.PagedList.Mvc 分页(ASP.NET Core 2.1)