2017-04-03 74 views
0

所以我使用這個指令崩潰在離子可變高度卡。該指令獲取自動高度並將其更改爲定義的高度,然後可以使用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之後,如何延遲元素高度的設置?

+1

其中使用$超時?這裏是語法'$超時(函數(){// yourcode}' – Akashii

+0

我試了一下纏手錶,周圍的一切,等無工作,我已經修改了原來的職位,以反映嘗試之一。 – cassiusclay

+0

把'一個'$ timeout'內$ watch'只延遲* *登記表處理程序,直到下一次消化週期。這將無法保證CSS操縱圖像的負荷後發生。瀏覽器觸發了「load」事件當一個資源被加載時,在''元素上,使用該事件對CSS進行排序。 – georgeawg

回答

0

好了,感謝泰國的投入,我有一個有效的解決方案:

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

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

      var img = element.querySelector('.full-image'); 

      angular.element(img).bind('load', function() { 

       var autoHeight = getElementAutoHeight(); 

       element.style.height = autoHeight + "px"; 


      }); 

      $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 
      } 
     } 
    }; 
}]) 
1

第一件事,角$超時沒有$間隔不會等待DOM樹加載,基本上,它的作用是等待當前消化週期在第一個參數執行該功能之前完成。通過這樣做,它將允許您的代碼在計算div的高度之前等待指令完成編譯和渲染。

但是,不能保證圖像將通過時間來加載。圖片由瀏覽器獨立於DOM渲染加載,因此,精確計算其圖像容器的高度,你應該儘量使用JS圖像對象加載事件的。一旦圖像完全加載後,您就可以更新高度。另外,對於你的指令,我認爲你不需要每次崩潰變量改變(在手錶內)來計算高度,你可以簡單地等待圖像被加載,計算一次高度,存儲它在作用域對象內部,並在崩潰變量發生變化時重新使用它。