对象匹配回退解决方案?(AngularJS&;ng重复)
我有一个有趣的兼容性问题。当然,object fit:cover在MS Edge和IE上不起作用,所以我一直在努力寻找解决方法。然而,我似乎无法通过javascript访问使用ng repeat创建的图像 我希望能够从控制器编辑图像样式,但querySelector('img')始终返回null 以下是HTML:对象匹配回退解决方案?(AngularJS&;ng重复),angularjs,internet-explorer,microsoft-edge,Angularjs,Internet Explorer,Microsoft Edge,我有一个有趣的兼容性问题。当然,object fit:cover在MS Edge和IE上不起作用,所以我一直在努力寻找解决方法。然而,我似乎无法通过javascript访问使用ng repeat创建的图像 我希望能够从控制器编辑图像样式,但querySelector('img')始终返回null 以下是HTML: <div class="js-image" id="danCarousel" style="height: 600px; width: 100%; background-colo
<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');
}
danApp.controller('indexController',函数($scope,$document,$timeout,QueueService){
$scope.state='index';
if('objectFit'在document.documentElement.style==false中){
log(“此浏览器不支持对象匹配”);
//获取旋转木马图像容器
var carouselImages=document.getElementsByClassName('js-image');
对于(变量i=0;i
有人知道这个问题的解决方案吗?使用ng类,调用控制器中的函数以返回适当的类名,或者添加一个类属性来滑动并通过ng类引用它。我尝试了这个方法,但仍然得到querySelector返回空值:(如果使用ng类,则不需要使用querySelector。将幻灯片对象传递到函数中,并从slide.src引用图像位置。