当前位置:Gxlcms > JavaScript > angularJS 指令封装回到顶部示例详解

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

时间:2021-07-01 10:21:17 帮助过:3人阅读

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

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

  1. /**
  2. **回到顶部
  3. **/
  4. define(["app"], function (app) {
  5. app().registerDirective("backToTop", function () {
  6. return {
  7. restrict: "E",
  8. link: function (scope, element, attr) {
  9. var e = $(element);
  10. $(window).scroll(function () { //滚动时触发
  11. if ($(document).scrollTop() > 300) //获取滚动条到顶部的垂直高度,到相对顶部300px高度显示
  12. e.fadeIn(300)
  13. else
  14. e.fadeOut(200);
  15. });
  16. /*点击回到顶部*/
  17. e.click(function () {
  18. $('html, body').animate({ //添加animate动画效果
  19. scrollTop: 0
  20. }, 500);
  21. });
  22. }
  23. };
  24. });
  25. });

注:

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

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

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

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

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

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

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

2.在页面调用backToTop指令

  1. <back-to-top class="back_top" title="返回顶部">
  2. <i class="fa fa-angle-up"></i>
  3. </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 -->

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

人气教程排行