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回到顶部按钮指令

最新文章

热门文章