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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
javascript事件模型实例分析
Jan 30 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
详解element-ui中表单验证的三种方式
Sep 18 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中yar框架实例用法讲解
2020/12/27 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
javascript实现添加附件功能的方法
2015/11/18 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
Python中的迭代器漫谈
2015/02/03 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
医科学校毕业生自荐信
2013/11/09 职场文书
财务主管自我鉴定
2014/01/17 职场文书
学习标兵获奖感言
2014/02/20 职场文书
文明班级建设方案
2014/05/15 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
公司离职证明标准格式
2014/11/18 职场文书
个人创业事迹材料
2014/12/30 职场文书
python编写五子棋游戏
2021/05/25 Python
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
vue封装数字翻牌器
2022/04/20 Vue.js