所以我使用這個指令崩潰在離子可變高度卡。該指令獲取自動高度並將其更改爲定義的高度,然後可以使用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>
正如你可以看到我已經注射$timeout
和離開的時間間隔空白,希望它會等到DOM加載,但它似乎無論我如何使用它,該指令仍會在呈現圖像子元素之前明確設置CSS中元素的高度。如何在每個ng-repeat
項目中加載ng-src
之後,如何延遲元素高度的設置?
其中使用$超時?這裏是語法'$超時(函數(){// yourcode}' – Akashii
我試了一下纏手錶,周圍的一切,等無工作,我已經修改了原來的職位,以反映嘗試之一。 – cassiusclay
把'一個'$ timeout'內$ watch'只延遲* *登記表處理程序,直到下一次消化週期。這將無法保證CSS操縱圖像的負荷後發生。瀏覽器觸發了「load」事件當一個資源被加載時,在'
'元素上,使用該事件對CSS進行排序。 –
georgeawg