欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-07 23:28:50
关于angularjs如何回到顶部,还是直接code吧! 1.构建指令,使用registerdirective构建指令添加到内部的hasdirectives对象内,以方便...

关于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 -->

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