Angular回到顶部按钮指令
之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放。
今天来把“回到顶部”按钮指令化。首先是页面html:
<!--回弹按钮-->
<back-button></back-button>
指令的单词在html中使用横杠分隔,而在js代码中使用驼峰法,没毛病,简单不解释:
/* 回弹按钮指令
* */
app.directive('backButton', function() {
return {
restrict: 'E',
template: '<button id="back-button">' +
'<img src="./img/icon_top.png"/>' +
'</button>',
replace: true,
//功能
compile: function (elem, attr) {
elem.bind('click', function () {
$('html,body').animate({scrollTop:0}, 300);
});
//窗口
$(window).scroll(function() {
var toTop = $(window).scrollTop();
if( toTop > 50) {
elem.fadeIn(100);
} else {
elem.fadeOut(200);
}
});
}
}
});
值得注意到是,网上的教程的dom绑定是在link中实现,其实这是不好的。angular应用在启动后会经历两个阶段,一个是编译compile,一个是链接link。编译阶段会遍历整个HTML文档,编译各个指令和模板,一旦编译阶段完成,便会调用编译函数,编译函数的参数包含有访问指令声明所在的元素(tElemente)及该元素其他属性(tAttrs)的方法。如果设置了compile函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。
DOM事件监听器的注册:这个操作应该在link函数中完成。注意:compile和link选项是互斥的。如果同时设置了这两个选项,那么会把compile所返回的函数当作链接函数,而link选项本身则会被忽略。就如上述代码中返回的就是link函数。
Angular回到顶部按钮指令的更多相关文章
- 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示
1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...
- HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
- 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)
回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
- Vue+element UI实现“回到顶部”按钮组件
介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...
- octopress添加回到顶部按钮
准备回到顶部的png图片一枚,可以随自己喜好google.分享我的 取名top.png,保存在octopress/source/images/top.png octopress/source/_inc ...
- html css jquery 回到顶部按钮
今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...
- jQuery实现“回到顶部”按钮功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序中两种回到顶部按钮的效果实现
一,使用view形式的回到顶部HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}} ...
- back to top 回到顶部按钮 css+js
效果 html <p id="back-to-top"><a href="#top"><span></span> ...
随机推荐
- Struts1.x 环境搭建和技术准备(上)
Struts 1.x 基于 Servlet,Struts 2.x基于Filter 1.servlet的注解配置方式和web.xml配置方式 使用servelt 3.0,eclipse在创建seb项目是 ...
- 【Unity编程】四元数(Quaternion)与欧拉角
版权声明:本文为博主原创文章,欢迎转载.请保留博主链接:http://blog.csdn.net/andrewfan 欧拉旋转.四元数.矩阵旋转之间的差异 除了欧拉旋转以外,还有两种表示旋转的方式:矩 ...
- 【Android】TextView文字长度测量和各种Paddding解析
老规矩,先上张图 o,这篇好像是分析篇,没有效果图.不管了,位置占着,老规矩不能坏,下面开始正文. *** 这篇博客会讲得比较杂: TextView里各部分的大小该怎么测量? 如何计算每行文字的长度? ...
- CUDA随机数生成库curand——deviceAPI
原创作品,如要转载请注明出处:http://www.cnblogs.com/shrimp-can/p/6590152.html 最近要在device函数中使用curand库生成随机数,查找了下资料,除 ...
- mysql命令参数详解
一,MySQL命令行参数 Usage: mysql [OPTIONS] [database] //命令方式 -?, --help //显示帮助信息并退出 -I, --help //显示帮助信息并退出 ...
- 如何下载github项目中的部分文件(文件夹)
https://minhaskamal.github.io/DownGit/#/home 将你要下载的链接放进去即可.
- 结队编程study
##今天针对study进行结队编程,我和搭档张佳慧刚开始误认为SystemBarTintManager,baseActivity是personalActivity跳转的下一个界面,因为这个代码个人中心 ...
- Realm数据库的简单介绍和使用
给大家介绍一个数据库操作的框架Realm,本文主要以iOS 平台的使用场景为例. realm是一个跨平台移动数据库引擎,支持iOS.OS X(Objective-C和Swift)以及Android: ...
- [LeetCode] Zuma Game 题解
题目 题目 Think about Zuma Game. You have a row of balls on the table, colored red(R), yellow(Y), blue(B ...
- mariadb 长链接时间限制导致队列消费进程崩溃
项目是一个数据同步项目,线下Android客户端把本地sqllite数据提交到云端队列,php做守护进程消费队列,以同步数据.初测没有问题,可是时不时出现诡异的崩溃,因为设置了错误邮件报警,发现错误代 ...