Question

我很难找到有关指令排序及其css属性更新的任何信息。

例如，我有两个指令，一个用于将元素设置为全屏高度，另一个用于垂直对齐内容。

app.directive('fullscreenElement', function() {
    return { 
        restrict: "A",
        link: function(scope,element,attrs){    
            $(element).each(function(){
                $(this).css('height', $(window).height());
            }); 
        }
    };
});

app.directive('alignVertical', function() {
    return { 
        restrict: "A",
        link: function(scope,element,attrs){
            var height = $(element).height();
            var parentHeight = $(element).parent().height();
            var padAmount = (parentHeight / 2) - (height / 2);
            $(element).css('padding-top', padAmount);
        }
    };
});

它们都是独立工作，麻烦在于它们是嵌套的，对齐垂直指令不起作用，我假设这是因为css高度还没有设置好吗？如何确保在alignVertical指令运行之前设置它？任何以更有棱角的方式编写这两个指令的技巧都将受到赞赏。

这有效：

<header style="height:800px">           
    <div align-vertical>
            this content is centered vertically as expected
    </div>
</header>

这不起作用（内容不会垂直居中，即使标题高度现在是全屏）：

<header fullscreen-element>         
    <div align-vertical>
            the header element is now fullscreen height but this content is *not* centered vertically
    </div>
</header>

感谢

Answer 1

找出一个解决方案，将其发布在此处以防万一有人发现它有用。

技巧是使用scope.watch和scope.evalAsync来监视父容器高度的变化，并在渲染完成后运行它们。

app.directive('alignVertical', function() {
return {
    link: function($scope, element, attrs) {
        // Trigger when parent element height changes changes
        var watch = $scope.$watch(function() {
            return element.parent().height;
        }, function() {
            // wait for templates to render
            $scope.$evalAsync(function() {
                // directive runs here after render.
                var that = $(element);
                var height = that.height();
                var parentHeight = that.parent().height();
                var padAmount = (parentHeight / 2) - (height / 2);
                that.css('padding-top', padAmount); 
            });
        });
    },
};
});

Angular嵌套指令排序

1 个答案: