0
我有一個有趣的兼容性問題。當然,物體貼合:封面不適用於MS Edge和IE,所以我一直在試圖找到解決方法。但是,我似乎無法訪問使用ng-repeat通過javascript創建的圖像。對象適合的後備解決方案? (AngularJS&ng-repeat)
我想能夠從控制器編輯圖像樣式,但querySelector('img')總是返回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; "/>
而這裏的Java腳本:
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');
}
任何人都知道一個解決方案嗎?
我試過這個,但我仍然得到querySelector返回null :( –
如果您使用的是ng-class,則不需要使用querySelector。將幻燈片對象傳入您的函數並引用幻燈片中的圖像位置。 SRC。 –