利用 directive 動態設定 style

html
====
<div grid="-15"></div> /*設定增量為-15，因為下方要留空間塞其他物件*/

javascript
====
.directive('grid', function ($timeout) {
    return {
        link: function (scope, elem, attrs) {
            var setHeight = function () { /*設定高度填滿剩餘空間*/
                var h = $(window).height() - $(elem).offset().top - 10;
                if (attrs.grid) h += parseFloat(attrs.grid); /*考慮增量*/
                $(elem).height(h);
            }
            $(window).resize(function () { /*當視窗大小改變時再次設定高度*/
                setHeight();
            });
            $timeout(function () { /*使用 timeout 避免初次計算bug*/
                setHeight();
            });
        }
    };
})