Question

我想创建一个应用于元素的指令，将其最大高度设置为等于窗口高度减去从元素顶部到窗口顶部的距离。

我是这样尝试的

.directive('resize', function ($window) {
return function (scope, element) {
    var w = angular.element($window);
    scope.getWindowDimensions = function() {
        return { 'h': w.height() };
    };
    scope.$watch(scope.getWindowDimensions, function(newValue, oldValue) {
        //get header height including margins
        var headerHeight = $('.page-header').outerHeight(true);

        scope.windowHeight = newValue.h;

        scope.style = function() {
            return {
                'height': (scope.windowHeight  - headerHeight) + 'px',
                'max-height': (scope.windowHeight  - headerHeight) + 'px'
            };
        };
    }, true);

    w.bind('resize', function() {
        scope.$apply();
    });
}
})

但是我必须为要设置其高度的元素上方的每个元素添加一个var。所以我相信使用

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

会更好，因为它相对于其设置的元素进行了所有测量，但如何在指令中访问此元素而不添加任何额外的类或标识符？

我是否还需要创建一个隔离范围让我在一个页面上多次使用它？

我的目标是让我的网络应用程序正文元素等于窗口的高度，并且任何包含高于该高度的div都有滚动条。

Answer 1

 1)It would be better if you have isolate scope. so that the directive can be user multiple elements with different heights.
 2) Send an array of elements (Which are above the required element) as an attribute to the directive. And calculate the height to be deducted from window height.

访问指令绑定的元素

1 个答案: