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

关于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 - 注释：

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

# angularjs回到顶部 # angularjs # 返回顶部 # 滚动到顶部 # AngularJS自定义指令实现面包屑功能完整实例 # AngularJS动态菜单操作指令 # 详解angularJs指令的3种绑定策略 # Angularjs 动态添加指令并绑定事件的方法 # Angularjs使用指令做表单校验的方法 # Angularjs自定义指令实现三级联动选择地理位置 # AngularJS框架的ng-app指令与自动加载实现方法分析 # AngularJS内置指令 # AngularJS中的指令全面解析(必看) # AngularJS学习笔记之基本指令(init、repeat) # AngularJS实现的回到顶部指令功能实例 # 是一个 # 过了 # 出现在 # 我们应该 # 则可 # 内建 # 会以 # 大家多多 # 滚动条 # return # scroll # document # link # scrollTop # attr # scope # element # window # restrict # var

返回目录在线咨询

上一篇：如何利用服务器网站扫描工具定期审查和维护网站安全性？
下一篇：本地网站怎么做,做的好的本地生活服务平台，大家有木有推荐？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求