angular之上滑换页指令

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属性中的方法

时间: 2024-11-11 19:07:53

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

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

几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 官方版本库 中. Angular.js   是一个神奇的JS框架,这一点毫无疑问,但是尽管受欢迎度和社团日益增长,但是社团中的很多开发者觉得Angular是另外一种浪费个人时间和效率的形式.在这些最不招人喜欢的问题中你会发现,测试和调试简直就是一个噩梦.你可以从网络上找到一些分散的报告, 这里有一

Angular API 核心组件之 指令篇

1 ngApp 利用这个指令可以自动触发Angular程序,ngApp指令指定了angular 应用的根节点,一般都会把这个指令绑定在页面的根节点上,例如:<body>或者<html>标签. 每个页面只有一个AngularJs的应用可以被自动触发,文档中第一个ngAPP指令会自动触发AngularJs应用.如果在一个html文档中想触发多个AngularJs的应用,你需要用angular.bootstrap来手动触发.angularJs应用不能互相嵌套. 你可以为angular应用

Angular.js中的指令——易懂全解析

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">angular.js中,指令是最基础的

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

本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net angular ng-click用于操作事件的指令</title> <script src="a

Angular回到顶部按钮指令

之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> <back-button></back-button> 指令的单词在html中使用横杠分隔,而在js代码中使用驼峰法,没毛病,简单不解释: /* 回弹按钮指令 * */ app.directive('backButton', function() { return { restrict: 'E

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

angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签.如: $scope.currentWork.description = “hello,<br><b>今天我们去哪里?</b>” 我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的.是这样的 hello, 今天我们去哪里? 怎么办呢?

ANGULAR 开发用户选择器指令

在开发表单时,我们需要使用经常需要使用到用户选择器,用户的数据一般使用如下方式存储: 用户1,用户2,用户3   我们可以使用angular指令实现选择器. <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <meta http-equiv="content-type" content="text/ht

Angular使用总结 --- 通过指令动态添加组件

之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组件 场景:鼠标移动到图标上时,展示解释性的说明文字.那就需要创建一个普通的tooltip组件.如下: <aside class="hover-tip-wrapper"> <span>{{tipText}}</span> </aside> HT

angular.js创建自定义指令-demo3

html: <!doctype html><html ng-app="myModule"> <head> <meta charset="utf-8"> </head> <body> <hello></hello> </body> <script src="js/angular-1.3.0.js"></script>