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