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

Question

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

我一直在 ie8 VM 中测试这个指令，不幸的是，ng-style 在 IE8 中根本不输出样式，这是由于 $window 服务未定义？知道如何使它正常工作吗？

此处显示:

这在现代浏览器上完美运行:

js:slideshow 指令

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