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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
第一篇初识bootstrap
Jun 21 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
网络传输协议(http协议)
Nov 18 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
js中的数组对象排序分析
Dec 11 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 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
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php使用PDO方法详解
2014/12/27 PHP
php中使用websocket详解
2016/09/23 PHP
PHP代码加密的方法总结
2020/03/13 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
Python Django使用forms来实现评论功能
2016/08/17 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
土木工程毕业生推荐信
2013/10/28 职场文书
房地产管理毕业生自荐信
2013/11/04 职场文书
公司财务工作总结的自我评价
2013/11/23 职场文书
大专生简历的自我评价
2013/11/26 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
会计工作决心书
2014/03/11 职场文书
讲座主持词
2014/03/20 职场文书
2014年行政工作总结
2014/11/19 职场文书
初中家长评语和期望
2014/12/26 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python