オブジェクトフィットの代替ソリューション？ （AngularJS＆ng-repeat）

Question

私は面白い互換性の問題があります。もちろんobject-fit：coverはMS EdgeとIEでは動作しないので、回避策を見つけることを試みてきました。しかし、javascript経由でng-repeatを使って作成した画像にはアクセスできないようです。

コントローラからイメージスタイルを編集できますが、querySelector（ 'img'）は常にnullを返します。

はHERESにHTML：

<div class="js-image" id="danCarousel" style="height: 600px; width: 100%; background-color: grey;"> 
<!-- carousel image --> 
<img ng-show="loaded" class="cimg {{fadeAnimation}}" ng-repeat="slide in slides" 
    ng-if="isCurrentSlideIndex($index)" ng-src="{{slide.src}}" style="position: absolute; 
    height: 100%; width: 100%; object-fit: cover; float: left; "/> 

そして、ここではJavascriptです：

danApp.controller('indexController', function($scope, $document, $timeout, QueueService) { 
$scope.state='index'; 

if('objectFit' in document.documentElement.style === false) { 
    console.log("This browser does not support object-fit"); 

    //get the carousel image container 
    var carouselImages = document.getElementsByClassName('js-image'); 

    for(var i=0; i < carouselImages.length; i++) { 

     console.log(i); 
     //get the image source url 
     var imageSrc = carouselImages[i].querySelector('img').getAttribute("ng-src"); 
     console.log(carouselImages[i].querySelector('img')); 

     //hide the image 
     carouselImages[i].querySelector('img').style.display = "none"; 

     //add background-size: cover 
     carouselImages[i].style.backgroundSize = 'cover'; 

     //add in the background image src here 
     carouselImages[i].style.backgroundImage = 'url(' + imageSrc + ')'; 

     //Add background-position: center center 
     carouselImages[i].style.backgroundPosition = 'center center'; 
    } 

    console.log("Compatability settings added."); 
} 
else { 
    console.log('This browser supports object-fit'); 
} 

誰もがこのための解決策を知っていますか？

Answer 1

ng-classを使用して、コントローラの関数を呼び出して適切なクラス名を返すか、クラスプロパティを追加してng-class経由でスライドさせて参照します。