2014-02-17 16 views
0

我想在客户端的项目中使用ng-grid显示一些数据, 除IE8外都是很好的(IE11和VM通过win7到browserstack的模拟模式),在这里网格不会呈现(只有容器div是呈现列和行),我在控制台中得到的例外是:ng-grid没有显示网格即ie 8

“无法获取属性宽度”未定义或空引用”

‘无法获得的未定义或空引用’

采用NG-格属性‘scrollTop的’(版本2.0.7)在基于.net的项目上使用角度(版本1.2.3)。 (在项目中使用的jQuery版本是1.11)

由于控制台在IE浏览器并没有真正给我更多关于跟踪的信息,所以我想我会问在这里,如果有人正面临类似的问题或任何人都有线索在哪里看。

和平与感谢提前抽出时间!

代码前端(添加) 这里是关于前端

<div data-ng-controller="benefitsController" > 
    <div id="topOrderBox-list" class="topOrderBox"> 

     <div class="left"> 
      <div class="boxHeader"> 
       Sök tjänst 
      </div> 
      <ul> 
       <li> 
        <label class=""> 
         <b>Frisökning</b></label> 
        <span class="help" title="Fritextsökning: Här kan du anger olika saker ">[?]</span> </li> 
       <li> 
        <input class="freeSearch search" type="text" placeholder="Skriv ett sökord" ng-model="model.filterText" /> 
       </li> 
       <li> 
        <label> 
         <b>Leverantörer</b></label> 
        <span class="help" title="Leverantörer: Här kan du söka efter en viss leverantör">[?]</span> </li> 
       <li> 
        <select class="partnersOption" ng-model="model.Partner" ng-options="partner.PartnerName for partner in model.Partners | orderBy:'PartnerName'"> 
         <option value="">Välj en leverantör</option> 
        </select> 
       </li> 
       <li> 
        <label> 
         <b>Välj en typ av förmån</b></label> 
        <span class="help" title="Typ av förmån: Här kan du söka på olika typer av förmåner. ">[?]</span> </li> 
       <li> 
        <select class="subCategoryOption" data-ng-model="model.SubCategory" data-ng-options="subCategory.SubCategoryName for subCategory in model.SubCategories | orderBy:'SubCategoryName'"> 
         <option value="">Välj en typ av förmån</option> 
        </select> 
       </li> 
      </ul> 
     </div> 
     <div class="right"> 
      <div data-ng-grid="gridOptions" class="gridStyle"></div> 
     </div> 


     <div data-ng-if="!(selectedRow[0].IsOrderable)" class="benefitDetails overflow" data-ng-show="selectedRow.length > 0"> 
      <ul> 
       <li> 
        <img id="partnerImageId" class="partnerImg" data-ng-src="@Url.Action("Show", "Image")/{{selectedRow[0].PartnerImageId}}" alt="Saknar tjänst bild"/> 
        <img id="benefitImageId" class="benefitImg" data-ng-src="@Url.Action("Show", "Image")/{{selectedRow[0].ImageId}}" alt="Saknar tjänst bild"/> 

        <h2>{{selectedRow[0].PartnerName}} {{selectedRow[0].BenefitName}} {{selectedRow[0].TimeSpanString}}, {{selectedRow[0].City}}</h2> 
       </li> 

      </ul> 
     </div> 


    </div> 

    <div class="benefitDetails overflow padding-top" ng-show="selectedRow.length > 0"> 


      <div class="spanDiv"> 
       <span ng-bind-html="selectedRow[0].CommonDescription"></span> 
       <br /> 
       <br /> 
       <span class="taxDescription" ng-bind-html="selectedRow[0].TaxDescription"></span> 
      </div> 

     </div> 

    <div class="bottomLinksBox"> 
     <a data-ng-controller="sendOrderBenefitController" data-ng-click="goToTop()" class="up" href="#">Upp &uarr;</a> 

      <a data-ng-if="selectedRow[0].IsOrderable" class="buttonLink rightBox" id="goOnLink" ng-href="@Url.Action("OtherBenefitsOrdering")/{{selectedRow[0].EmployerBenefitId}}" >Gå vidare till beställning</a> 

    </div> 
    <div class="contractBox"> 
     <p></p> 
    </div> 
</div> 

代码的一部分,这里是一些代码上在控制器

adderasApp.controller('benefitsController', ['$scope', 'benefitsService', function ($scope, benefitsService) { 

    $scope.model = benefitsService.Benefits.get({ isHealthCare: 'false' }, function() { 
     $scope.EmployerBenefits = $scope.model.EmployerBenefits; 
    }); 

    $scope.selectedRow = []; 

    $scope.filterOptions = { 
     filterText: '' 
    }; 



    $scope.gridOptions = { 
     data: 'EmployerBenefits', 
     columnDefs: [ 
      { field: 'PartnerName', displayName: 'Leverantör' }, 
      { field: 'City', displayName: 'Ort' }, 
      { field: 'BenefitName', displayName: 'Tjänst' }, 
      { field: 'SubCategoryName', displayName: 'Kategori' }, 
      { field: 'PriceString', displayName: 'Pris' }, 
      { field: 'TimeSpanString', displayName: 'Tid' }, 
     ], 
     multiSelect: false, 
     selectedItems: $scope.selectedRow, 
     filterOptions: $scope.filterOptions, 
     headerClass: 'otherBenefitSearchHeader' 
     //headerRowTemplate: '<div ng-style="{\'z-index\': col.zIndex()}" ng-class="{\'col_select\': col.showSortButtonDown(), \'col_select_up\': col.showSortButtonUp() }" ng-repeat="col in visibleColumns()" class="ngHeaderCell col{{$index}}" ng-header-cell></div>' 
    }; 

    $scope.$watch('[ model.Partner, model.SubCategory, model.filterText, model.CommonDescription]', function (newValue, oldValue) { 


     var searchText = []; 
     var isOrderable; 

     if (newValue[0] !== undefined && newValue[0] != null) { 
      searchText.push(newValue[0].PartnerName); 
     } 
     if (newValue[1] !== undefined && newValue[1] != null) { 
      searchText.push(newValue[1].SubCategoryName); 
     } 
     if (newValue[2] !== undefined && newValue[2] != null) { 
      searchText.push(newValue[2]); 
     } 

     if (newValue[3] !== undefined && newValue[3] != null) { 
      searchText.push(newValue[3].CommonDescription); 
     } 

     $scope.filterOptions.filterText = searchText.join(';'); 



    }, true); 

}]); 

尝试过以下http://docs.angularjs.org/guide/ie

P.s.来自工厂/服务的数据正在从同一个域中获取数据,并且数据似乎已经通过,其他不使用ng-grid但宁静服务的页面似乎工作正常。

无论如何,再次感谢您付出的时间和精力! 和平

+0

这将是有益的分享代码... –

+0

感谢@KristofFeys,现在的前端代码和控制器代码已被添加! – DaWoody

回答

1

我找到了解决方案! :) 基本上它的IE8是非常挑剔的阅读js和。 我在读完这个后解决了https://github.com/angular-ui/ng-grid/issues/543 所以在我的控制器的ng-grid代码中,我删除了gridOptions中的最后一个参数columnDefs对象。如:

$scope.gridOptions = { 
    data: 'EmployerBenefits', 
    columnDefs: [ 
     { field: 'PartnerName', displayName: 'Leverantör' }, 
     { field: 'City', displayName: 'Ort' }, 
     { field: 'BenefitName', displayName: 'Tjänst' }, 
     { field: 'SubCategoryName', displayName: 'Kategori' }, 
     { field: 'PriceString', displayName: 'Pris' }, 
     { field: 'TimeSpanString', displayName: 'Tid' } 
    ], 
    multiSelect: false, 
    selectedItems: $scope.selectedRow, 
    filterOptions: $scope.filterOptions, 
    headerClass: 'otherBenefitSearchHeader' 
    //headerRowTemplate: '<div ng-style="{\'z-index\': col.zIndex()}" ng-class="{\'col_select\': col.showSortButtonDown(), \'col_select_up\': col.showSortButtonUp() }" ng-repeat="col in visibleColumns()" class="ngHeaderCell col{{$index}}" ng-header-cell></div>' 
}; 

无论如何和平和感谢输入的家伙! ;)

0

Angular在10之前遇到了问题。请按照this guide的说法进行操作。也就是说,Angular和IE8有一些very difficult issues to get around

对于我的应用程序,我必须为HTML5支持,Modernizr,完整的jQuery以及用于HTML5控件的垫片添加垫片。只是为了支持IE9而回来。最好的情况是斑点。

+0

感谢您的时间和评论,我同意IE8似乎使它有点困难。将读更多关于垫片等,看看这可能有助于在这种情况下。 – DaWoody

+0

我用js-webshim http://afarkas.github.io/webshim/demos/。 –

+0

感谢您的意见,我们也会为其他目的寻找垫片。无论如何,需要现代化的基本css操作和其他的东西以及..叹。和平:) – DaWoody