ngのリピート内の要素の高さを取得した後、私は<em>角度の</em><strong><em>NGリピート</em></strong>を使用してレンダリング、その後、製品のリストを取得するためのAJAXリクエストを呼び出すAJAX要求

Question

からデータを受け取ります。

私がリストに一つの製品が含まれているdiv要素の高さを取得したいが、コンソールはなかれ画面に「0」を記録し、私は、要求が行われた後$timeoutを使用しようとしました。

this.$timeout(function() { 
    let image_id = '#image_id'; 
    let height = $(image_id).height(); 
    console.log(height); 
},0); 

例：リストには3つの項目があり、ブラウザに表示するにはng-repeatを使用します。私は最初の画像の高さに等しい2つのビデオの高さを作りたい。
リストがコントローラで定義されている場合、正常に動作します。しかし、私がajaxリクエストを呼び出してリストにデータを入れると、上記の関数は常に0をログに記録します。

あなたが最初の要素からの高さを取ると同じ高さに、すべての高さを変更するカスタムディレクティブを使用することができます

Answer 1

：

<div ng-controller="Ctrl"> 
    <div class="thing" ng-repeat="thing in things" same-height> 
    thing {{thing}} 
    </div> 
</div> 

    function Ctrl($scope) { 
    $scope.things = [ 
    'A', 'B', 'C' 
    ]; 
    $scope.height ="auto"; 
} 

angular.module('myApp', []) 
    .directive('sameHeight', function() { 
    return function(scope, element, attrs) { 
     if (scope.$first) { 

     scope.$parent.height = element[0].offsetHeight; 


     } 
     var height = scope.height; 
     element.css('height',height+'px'); 
    }; 
    }); 

デモ：http://plnkr.co/edit/n9ksMIUxTwApZQy5ooju?p=preview

Answer 2

事前にあなたの必要性がビルドする場合製品の前にdiv要素をビューにロードされますuとあなたは

ng-style="height:divHeight" 

を使用することができますし、cotrollerにすることができます （オートへのdiv形0のレンダリングを避けるため）サービスは、モバイル解像度でいくつかの標準的な配給ベースを使って、Ajaxが完了する前にdivに高さを与えます。

サービスで

getImageHeight() { 
     var x = window.innerWidth * 62.8/100; 
     var roundHeight = Math.ceil(x); 
     return Promise.resolve(roundHeight); 
    } 

Answer 3

、これを試してみてください、それはあなたを助けますように。このコードは画像のonloadで実行されるので、画像がある場合は、高さ0を表示しません。

this.$timeout(function() { 
    let image_id = '#image_id'; 
    var tmpImg = new Image() ; 
    tmpImg.src = $(image_id).attr('src') ; 
    tmpImg.onload = function() { 
    let height = $(image_id).height(); 
    console.log(height); 
    }; 

},0);