微客导航 » 文章资讯 » Angular.js通过自定义指令directive实现滑块滑动效果

Angular.js通过自定义指令directive实现滑块滑动效果

2023-09-23 08:15:05 217

前言

最近因为工作需要让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动，说明一下我们项目使用技术angularJs.大家都知道，使用jquery很好实现。

那么angular如何实现呢，我用的是自定义指令（directive）。

方法如下

1.下面是我html部分代码，detail-scroll是我自定义的标签

...............

//.....................

2.开始写js代码

这里假设我们在某一个module下，控制器叫做AppCtrl

angular.module('xxxx',[])
.controller('AppCtrl',['$scope',AppCtrl])
.directive('detailScroll',function(){
//返回一个函数
return{
link:function($scope,element,attr){
varcontainer=angular.element(window);
vartimeH=$('#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',//ECMAE元素C类名M注释A属性
};
});
functionAppCtrl($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(){
functionappCtrl($scope){
//处理逻辑
}

return{

restrict:'EA',

replace:true,
scope:{
//想要从父级controller传到这里的函数,对象，变量，分别用（&，=，@），具体怎么用大家可以参考angular官网详解
}
templateUrl:'路径或是html拼接的字符串',

controller:function($scope,$element,$attrs,$transclude){//控制器逻辑}
//controller这样写也可以，还有一种直接写controller名，通过注入的方法，比如
controller:['$scope',appCtrl]

}})

可以参考这个https://www.nhooo.com/article/107045.htm，很详细~~~

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

返回顶部
3162201930
czq8825@qq.com

Angular.js通过自定义指令directive实现滑块滑动效果

热门推荐

随机推荐