angularJS 指令封装回到顶部示例详解
关于angularJS如何回到顶部，还是直接code吧！
1.构建指令，使用registerDirective构建指令添加到内部的hasDirectives对象内，以方便后面在全局查找指令的时候进行匹配。
/**
**回到顶部
**/
define(["app"],function(app){
app().registerDirective("backToTop",function(){
return{
restrict:"E",
link:function(scope,element,attr){
vare=$(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-topclass="back_top"title="返回顶部"> <iclass="fafa-angle-up"></i> </back-to-top>
注：
restrict-EACM的子集的字符串，它限制directive为指定的声明方式。如果省略的话，directive将仅仅允许通过属性声明：
E-元素名称：<back-to-top></back-to-top>
A-属性名：<divback-to-top</div>
C-class名：<divclass=”back-to-top”></div>
M-注释：<!--back-to-top-->
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。