healthmallDirectives.directive("goodsTopRefresh", ['$window',function ($window) {
return {
link: function (scope,el,attrs) {
var wai = $window.document.getElementById("outerDiv");
var content = $window.document.getElementById("goodsnei") wai.addEventListener("scroll", function (e) {
var waiHeight = wai.offsetHeight;
var contentHeight = content.offsetHeight;
var waiTop = wai.scrollTop;
if(waiTop+ waiHeight-40 >= contentHeight){
var startY;
var endY;
content.addEventListener("touchstart", function (e){
startY = e.changedTouches[0].pageY;
});
content.addEventListener("touchend", function (e){
endY= e.changedTouches[0].pageY;
if(startY -endY>=80){
scope.$apply(attrs.toptorefresh);
}
}); }
})
} };
}]);

  获得滚动页的大小和内容页大小,通过touchStart和touchEnd判断页面是否是上滑,若上滑则执行toptorefresh属性中的方法

angular之上滑换页指令的更多相关文章

  1. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  2. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  3. Angular使用操作事件指令ng-click传多个参数示例

    本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="m ...

  4. ANGULAR 开发用户选择器指令

    在开发表单时,我们需要使用经常需要使用到用户选择器,用户的数据一般使用如下方式存储: 用户1,用户2,用户3   我们可以使用angular指令实现选择器. <!DOCTYPE html> ...

  5. angular中的ng-bind-html指令和$sce服务

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  6. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. angular : direative :comunication 指令之间的通讯

    在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个na ...

  8. Angular回到顶部按钮指令

    之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> < ...

  9. angular.js的ng-app 指令定义一个 AngularJS 应用程序。

    <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UT ...

随机推荐

  1. PHPMailer < 5.2.18 - RCE EXP(Bash)

    #!/bin/bash# CVE-2016-10033 exploit by opsxcq# https://github.com/opsxcq/exploit-CVE-2016-10033echo ...

  2. MyEclipse:各种提示图标的含义

    1.新建的项目,项目名称前有黄色小警示号的原因, 2.项目名称上有红色叹号,说明缺少jar包,仔细找一下,看看缺了什么,添加进去一般就好了. 3.出现红色叉号,那说明代码错误,需要修改代码.

  3. Linux常用命令和Shell编程基础

    目录相关 cd - .与.. 分别表示当前目录和父目录 - ~与$HOME 都是指当前用户的主目录 - cd – 切换到上一次所在的目录(不一定是父目录) pwd - pwd 显示当前目录 - $PW ...

  4. Bubble Cup 8 finals A. Fibonotci (575A)

    题意: 定义类循环序列为 长度无限,且除了有限个元素外,均满足s[i] ≡ s[i mod N] (i≥N). 现在有数列F,定义为 F[i] = s[i-2]*F[i-1] + s[i-1]*F[i ...

  5. 全文检索解决方案(lucene工具类以及sphinx相关资料)

    介绍两种全文检索的技术. 1.  lucene+ 中文分词(IK) 关于lucene的原理,在这里可以得到很好的学习. http://www.blogjava.net/zhyiwww/archive/ ...

  6. Tomcat 知识点

    Tomcat(重点) Tomcat是一个符合于Java EE Web标准的最小web容器,所有的jsp程序一定需要有WEB容器的的支持才可以运行,而且在给定的WEB容器里面会支持事务处理操作. Tom ...

  7. Android 的Parcelable接口

    此文转载自http://www.cnblogs.com/renqingping/archive/2012/10/25/Parcelable.html 1. Parcelable接口 Interface ...

  8. 如何添加商*通新对话快捷链接?不用js代码

    我们在使用商务通一般都是在页面中嵌入一段js代码,如果您是js洁癖,是不是在想着如何直接用一张小图加上商*通新对话链接来代替呢?好,那就一起来研究一下吧. 首先,我们打开一个有商*通js弹窗的页面,比 ...

  9. Bootstrap表单验证插件bootstrapValidator使用方法整理

    插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...

  10. MyBatis:统计数量

    dao: /** * 统计商家的案例数量 * * @param shopId * @return */ long countByShopId(Long shopId); @Override publi ...