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 checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
DOM 基本方法
Jul 18 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
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
php 读取文件乱码问题
2010/02/20 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
javascript运动详解
2015/07/06 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python的标准模块包json详解
2017/03/13 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
护士实习自我鉴定
2013/10/22 职场文书
医学护理毕业生自荐信
2013/11/07 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
教师节演讲稿
2014/05/06 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
客户经理岗位职责
2015/01/31 职场文书
置业顾问岗位职责
2015/02/09 职场文书
大学生个人简历自荐信
2015/03/06 职场文书