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>

这就解决啦！