angular的$ window服务在IE8中返回undefined

Question

我已经创建了一个名为slideshow的指令，其中包含一些范围变量，这些变量是双向绑定到ng-style的。该指令是一个响应式轮播，它基于窗口高度，使用$ window sevice获取。

我一直在ie8 VM中测试这个指令，不幸的是，ng-style在IE8中根本没有输出样式，这是因为$ window服务未定义？任何想法如何正常工作？

此处显示：

这适用于现代浏览器：

js：幻灯片指示

'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>

样本页面工厂

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

Answer 1

$window服务未定义 - 而IE8缺少window.innerHeight/Width。

如果您使用的是jQuery，请使用$(window).height()/width() 如果没有使用IE的这个后备：

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