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二维数组采用定义数组的数组来实现
Dec 09 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 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
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
php微信公众号开发之简答题
2018/10/20 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
python怎么判断模块安装完成
2020/06/19 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
运动会800米加油稿
2014/02/22 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
基于python的matplotlib制作双Y轴图
2021/04/20 Python
python中mongodb包操作数据库
2022/04/19 Python