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 相关文章推荐
javascript 关于# 和 void的区别分析
Oct 26 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
JS实现简单抖动效果
Jun 01 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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
短波的认识
2021/03/01 无线电
一个php作的文本留言本的例子(三)
2006/10/09 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP类型约束用法示例
2016/09/28 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
详解vue路由
2020/08/05 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
Python简明入门教程
2015/08/04 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
详解Python3定时器任务代码
2019/09/23 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
python sleep和wait对比总结
2021/02/03 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
人事专员的职责
2014/02/26 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python