关于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指令
代码如下
注:
restrict - EACM的子集的字符串,它限制directive为指定的声明方式。如果省略的话,directive将仅仅允许通过属性声明:
E - 元素名称:
A - 属性名:
C - class名:
M - 注释 :
【angularjs api文档】angularJS 指令封装回到顶部示例详解
http://m.bbyears.com/wangyezhizuo/122600.html
推荐访问:angularjs2 angularjs下载 angularjs自定义指令 angularjs和vue的区别