CODEWITHSUNDEEP
javascriptangularjsinternet-explorer-8
John Abraham
John Abraham

Reputation: 18791

angular's $window service returns undefined in IE8

I've created a directive named slideshow with a few scope variable that are twoway bound to ng-style. This directive is a responsive carousel that is based on window height which is fetched using $window sevice.

I've been testing this directive in ie8 VM and unfortunately, the ng-style isn't outputting styles at all in IE8 this is due to $window service coming up undefined? any idea how to make this work properly?

Shown here: ie8

This works perfectly on modern browers: Chrome

js: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'
            }
          }
      }
  });

Upvotes: 1

Views: 1126

Answers (1)

gkalpak
gkalpak

Reputation: 48211

It's not the $window service being undefined - it's rather IE8's lacking window.innerHeight/Width.

If you are using jQuery, use $(window).height()/width().
If not used this fallback for IE:

scope.pageCollectionWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
scope.pageCollectionHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Upvotes: 2

Related Questions