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

Angular回到顶部按钮指令

2024-09-17 16:31:14   215人阅读

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

　　今天来把“回到顶部”按钮指令化。首先是页面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回到顶部按钮指令


联系
我们