物体适应后备解决方案？ （AngularJS＆安培; NG-重复）

Question

我有一个有趣的兼容性问题。当然，对象适用：封面不适用于MS Edge和IE，所以我一直在尝试找到它的解决方法。但是，我无法通过javascript访问使用ng-repeat创建的图像。

我希望能够从控制器编辑图像样式，但querySelector（＆＃39; img＆＃39;）始终返回null。

继承人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引用它。