css - 指令链接函数中的 $timeout

Question

因此，我使用此指令在 Ionic 中折叠可变高度卡片。该指令获取自动高度并将其更改为定义的高度，以便随后可以使用 css 动画将其折叠为 0。它可以很好地满足我的需求，但现在我需要使用 ng-src 动态加载卡片中的图像。发生的事情是图像在指令之后加载，因此图像加载并溢出卡片。

指令:

.directive('collapse', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',

        link: function ($scope, ngElement, attributes) {
            var element = ngElement[0];


            $timeout(function(){                
                $scope.$watch(attributes.collapse, function (collapse) {
                            var newHeight = collapse ? 0 : getElementAutoHeight();

                            element.style.height = newHeight +"px";
                            ngElement.toggleClass('collapsed', collapse);
                        });

            function getElementAutoHeight() {
                var currentHeight = getElementCurrentHeight();

                element.style.height = 'auto';
                var autoHeight = getElementCurrentHeight();

                element.style.height = currentHeight +"px";
                getElementCurrentHeight(); // Force the browser to recalc height after moving it back to normal

                return autoHeight;
            }

            function getElementCurrentHeight() {
                return element.offsetHeight
            }
         });
      }
    };
}])

和 HTML:

<div ng-repeat="item in items | orderBy : '-'" collapse="item.deleted">
    <div class="list card">
        <img class="full-image" ng-src="{{item.image}}"/>
    </div>
</div>

如您所见，我注入(inject)了 $timeout 并将间隔留空，希望它会等到 DOM 加载完毕，但似乎无论我如何使用它，指令仍然明确在渲染图像子元素之前在 css 中设置元素的高度。如何将元素高度的设置延迟到每个 ng-repeat 元素中加载 ng-src 之后？

Answer 1

首先，没有 $interval 的 Angular $timeout 不会等待 DOM 树加载，基本上，它所做的是等待当前的 digest cycle在执行第一个参数中的函数之前完成。这样一来，您的代码就可以等待指令完成编译和渲染，然后再计算 div 的高度。

但是，不能保证图像会在那个时候加载。图片由浏览器加载，独立于 DOM 渲染，因此，要精确计算包含图片的容器的高度，您应该使用 JS Image Object 和 load 事件 .图像完全加载后，您就可以更新高度。

另外，对于你的指令，我认为你不需要在每次 collapse 变量改变时(在 watch 内)都计算高度，你可以简单地等到图像被加载，计算一次高度，将它存储在里面scope 对象，并在 collapse 变量发生变化时重用它。