I've developed a custom directive called slideshow with some scope variables that are two-way bound to ng-style. This directive functions as a responsive carousel that adjusts based on the window height retrieved using the $window service.
During testing in an IE8 virtual machine, I encountered an issue where the ng-style did not apply any styles in IE8 due to the $window service being undefined. Any suggestions on how to resolve this and make it function properly?
Display:
This feature works flawlessly on modern browsers:
JavaScript: slideshow directive
'use strict';
angular.module('alexApp')
.directive('slideshow', function($window){
return {
restrict: 'A',
templateUrl: 'template1.html',
controller: function($scope, Pages) {
$scope.adPageData = Pages;
$scope.adpageLength = $scope.adPageData.length;
},
link: function postLink(scope, element, attrs) {
var targetRatio = 0.8419689;
var navigationOffset = 92;
var currentPageIndex = 0;
scope.initializeWindowSize = function() {
scope.pageCollectionWidth = $window.innerWidth;
scope.pageCollectionHeight = $window.innerHeight;
scope.pageCollectionWidthTotal = scope.pageCollectionWidth + 'px';
scope.properPageWidth = ( scope.pageCollectionHeight-navigationOffset)*targetRatio + 'px';
scope.properPageWidthLength = ((scope.pageCollectionHeight-navigationOffset)*targetRatio)*scope.adpageLength + 'px';
scope.leftPageOffset = scope.pageCollectionHeight/4+'px';
scope.currentPageOffset = currentPageIndex*(-(scope.pageCollectionHeight-navigationOffset)*targetRatio)+'px';
}
scope.initializeWindowSize();
//alert('initi');
return angular.element($window).bind('resize', function() {
scope.initializeWindowSize();
//alert('resized');
return scope.$apply();
});
}
};
});
HTML - template1.html:
<script type="text/ng-template" id="template1.html">
<div class="weekly-viewport" ng-style="{width:pageCollectionWidthTotal}">
<ul class="page-collection" ng-style="{width:properPageWidthLength, left:leftPageOffset, marginLeft:currentPageOffset }">
<li class="page-layout" ng-repeat="page in adPageData.pages" ng-style="{width:properPageWidth}">
<ul class="page shop-local-page">
<li class="imageurl"><img ng-src="{{page.imageurl}}" alt="" /></li>
</ul>
</li>
</ul>
</div>
</script>
Sample pages factory
var app = angular.module('alexApp');
app.factory('Pages', function() {
var Pages = {};
Pages = {
pages': [
{
imageurl: 'http://placekitten.com/200/300'
},
{
imageurl: 'http://placekitten.com/200/300'
}
}
}
});