首页 > 代码库 > Angular回到顶部按钮指令

Angular回到顶部按钮指令

  之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放。

  今天来把“回到顶部”按钮指令化。首先是页面html:

    <!--回弹按钮-->
    <back-button></back-button>

  指令的单词在html中使用横杠分隔,而在js代码中使用驼峰法,没毛病,简单不解释:

/*  回弹按钮指令
 * */
app.directive(‘backButton‘, function() {
    return {
        restrict: ‘E‘,
        template:   ‘<button id="back-button">‘ +
                        ‘<img src="http://www.mamicode.com/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回到顶部按钮指令