最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术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,很详细~~~

利用angularJs自定义指令(directive)实现在页面某一部分内滑块随着滚动条上下滑动的更多相关文章

  1. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  2. angularjs - 自定义指令(directive)

    自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...

  3. angularJs自定义指令.directive==类似自定义标签

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...

  4. AngularJS自定义指令directive:scope属性 (转载)

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

  5. AngularJS 自定义指令directive 介绍

    --------------------------------------------------------------------------- 指令的作用是把我们自定义的语义化标签替换成浏览器 ...

  6. angularJs自定义指令(directive)实现滑块滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  7. angularjs 一篇文章看懂自定义指令directive

     壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...

  8. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  9. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

随机推荐

  1. 转python爬虫:BeautifulSoup 使用select方法详解

    1 html = """ 2 <html><head><title>The Dormouse's story</title> ...

  2. Python包管理工具和多版本环境管理

    1. Python包管理工具 在安装Python包的过程中,经常涉及到distutils.setuptools.distribute.setup.py.easy_install.easy_instal ...

  3. redis 介绍和常用命令

    redis 介绍和常用命令 redis简介 Redis 是一款开源的,基于 BSD 许可的,高级键值 (key-value) 缓存 (cache) 和存储 (store) 系统.由于 Redis 的键 ...

  4. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  5. jenkins 配置qq邮箱

  6. Netty自娱自乐之协议栈设计

    ---恢复内容开始--- 俺工作已经一年又6个月了,想想过的真快,每天写业务,写业务,写业务.......然后就是祈祷着,这次上线不要出现线上bug.继续这每天无聊的增删改查,学习学习一下自己感兴趣的 ...

  7. 想做iPhoneX抢购活动?压测大师先教你优化网站后台

    北京时间9月13日凌晨1点,iPhone 10周年,在Apple Park乔布斯剧院,苹果发布了三款新iPhone.全面屏iPhone X来袭,这款被定义为未来的智能手机黑科技满满:全面屏,无线充电. ...

  8. 关于SpringMVC项目报错:java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/xxxx.xml]

    关于SpringMVC项目报错:java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/xxxx ...

  9. python 每日一练: 读取log文件中的数据,并画图表

    之前在excel里面分析log数据,简直日了*了. 现在用python在处理日志数据. 主要涉及 matplotlib,open和循环的使用. 日志内容大致如下 2016-10-21 21:07:59 ...

  10. 个人作业-2 必应词典安卓APP分析

    产品: 必应词典 安卓版 第一部分:调研,评测 1.对于这款app的第一印象就是界面不是很美观,页面排版十分混乱,有些功能比较鸡肋,功能也不是很丰富,不过这款app的ui设计相对简洁,让人容易上手,对 ...