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函数。

时间: 04-25

Angular回到顶部按钮指令的相关文章

回到顶部按钮

本实战来自个人研究,不一定是最好的! 仅支持IE8及以上版本! HTML: 1 <!--回到顶部 开始--> 2 <div id="to_top" class="to_top"> 3 <i class="to_top_pic"></i> 4 </div> 5 <!--回到顶部 结束--> CSS: 1 /*回到顶部按钮,切忌初始化不要用float.position(absol

listview下拉到一定位置显示回到顶部按钮

布局文件: <RelativeLayout android:id="@+id/ll_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/ll_bottom" android:layout_below="@id/ll_top" > <

简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> </div> 这里的<a>标签里面的href=“#top”就表示点击它就可以回到顶部,就不写回到顶部的代码了 2.设置其CSS样式: #return-top{ width: 50px; height: 50px; background-color: #8FBC8F;/*背景颜色*/

JQuery实现淡入淡出的回到顶部按钮

效果如下: 按钮的html和css代码如下. <div id="gotop"> <i class="fa fa-chevron-up"></i> </div> i标签<i class="fa fa-chevron-up"></i>使用了Font Awesome,400多个图标(包括QQ.微信.微博)只要30KB,可无限放大,不需要js,非常的??. 按钮gotop用fixed

Vue+element UI实现“回到顶部”按钮组件

介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹BackToTop导入到现有项目中即可使用. 使用示例 <template> <div id="app"> <!--可自定义按钮的样式.show/hide临界点.返回的位置

html css jquery 回到顶部按钮

今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; bottom: 15px; z-index: 9999; font-size: 25px; width: 40px; height: 40px; background-color: #adadad; color: #ffffff; cursor: pointer; border-radius: 2

octopress添加回到顶部按钮

准备回到顶部的png图片一枚,可以随自己喜好google.分享我的 取名top.png,保存在octopress/source/images/top.png octopress/source/_includes/custom/目录下新建网页文件:totop.html <!--返回顶部开始--> <div id="full" style="width:0px; height:0px; position:fixed; right:80px; bottom:80p

超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码

//以下代码放到一个adapt.js文件当中 (function (doc, win) {   var docEl = doc.documentElement,     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',     recalc = function () {       var clientWidth = docEl.clientWidth;       if (!clientWi

添加回到顶部按钮

获取览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 :$(window).width();获取页面的文档高度 :$(document).height();获取页面的文档宽度 :$(document).width();获取滚动条到顶部的垂直高度 :$(document).scrollTop();获取滚动条到左边的垂直宽度 :$(document).scrollLeft(); //监听滚动条滚动事件 $(window).scroll( function()