IONIC自定義動態高度SubHeader的解決方案

IONIC subheader是我們常用的一個css 屬性，但是這個subheader的高度是固定的，當然也是可以改變的，但是如果改了subheader的告訴，還要更改content的top值，稍微有些麻煩，如果是動態告訴的subheader就麻煩了，還需要動態更改content的top數值，所以就寫了一個directive解決這個問題：

上代碼吧：

主要代碼

/**
 * Created by Richard on 9/21/16.
 */

'use strict';

// @ngInject
module.exports = function() {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(function() {
                let height = element[0].offsetHeight + 44;
                let content = angular.element(document.querySelector('.has-subheader'));
                content.css("top", height + "px");
            });
        }
    }
};

定義directie:

定義directive:

.directive('customSubheader', customSubheader)

重寫css:

.bar-subheader {
        height: auto;
}

使用方法：

<div custom-subheader class="bar bar-subheader">

</div>

這就解決啦！