angularJS 指令封装回到顶部示例详解


Posted in Javascript onJanuary 22, 2017

关于angularJS如何回到顶部,还是直接code吧!

1.构建指令,使用registerDirective构建指令添加到内部的hasDirectives对象内,以方便后面在全局查找指令的时候进行匹配。

/** 
**回到顶部 
**/ 
 
define(["app"], function (app) { 
   
  app().registerDirective("backToTop", function () { 
    return { 
      restrict: "E", 
      link: function (scope, element, attr) { 
        var e = $(element); 
        $(window).scroll(function () {         //滚动时触发 
          if ($(document).scrollTop() > 300)     //获取滚动条到顶部的垂直高度,到相对顶部300px高度显示 
            e.fadeIn(300) 
          else 
            e.fadeOut(200); 
        }); 
        /*点击回到顶部*/ 
        e.click(function () { 
          $('html, body').animate({         //添加animate动画效果 
            scrollTop: 0 
          }, 500); 
        }); 
      } 
    }; 
  }); 
});

注:

registerDirective 是$CompileProvider的方法,主要就是把内建指令添加到内部的hasDirectives对象内,以方便后面在全局查找指令的时候进行匹配。

指令从html的角度,可以认为指令名字是一个标识符,可以作为元素名(E),元素属性(A),注释(M),类名(C)出现在html中;而从JavaScript的角度,则可以认为是返回的一个规范化的有特殊意义的指令对象。

link函数创建可以操作dom的指令,签名如下:

link:function(scope,element,attrs){};

scope在其内部作用域注册监听器的作用域。

element代表实例元素,指使用此指令的元素。在postLink函数中我们应该只操作此 元素的子元素,因为子元素已经被链接过了。

attrs 代表实例属性,是一个由定义在元素上的属性组成的标准化列表,可以在所有指 令的链接函数间共享。会以JavaScript对象的形式进行传递。 2. 将定义的 backToTop 指令对象在页面调用。

2.在页面调用backToTop指令

<back-to-top class="back_top" title="返回顶部">
<i class="fa fa-angle-up"></i>
</back-to-top>

注:

restrict - EACM的子集的字符串,它限制directive为指定的声明方式。如果省略的话,directive将仅仅允许通过属性声明:

E - 元素名称: <back-to-top></back-to-top>

A - 属性名: <div back-to-top</div>

C - class名: <div class=”back-to-top”></div>

M - 注释 : <!-- back-to-top -->

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
13个PHP函数超实用
Oct 21 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
微信小程序实现多选功能
Nov 04 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
jQuery实现的分页功能示例
Jan 22 #Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 #Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 #Javascript
前端开发必知的15个jQuery小技巧
Jan 22 #Javascript
Vue.js学习之过滤器详解
Jan 22 #Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 #Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 #Javascript
You might like
二进制交叉权限微型php类分享
2014/02/07 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
js获取url参数值的两种方式
2013/09/10 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
4s客服专员岗位职责
2013/12/01 职场文书
成语的广告词
2014/03/19 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
子女赡养老人协议书
2016/03/23 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
golang实现浏览器导出excel文件功能
2022/03/25 Golang