Ui-grid 角度表达式在 IE 11 中未按预期呈现
Posted
技术标签:
【中文标题】Ui-grid 角度表达式在 IE 11 中未按预期呈现【英文标题】：Ui-grid angular expression does not render as expected in IE 11 【发布时间】：2016-01-28 13:55:22 【问题描述】：我试图让这个plunker Ui-grid cell template 在大多数浏览器上工作，但在 IE 11 中失败。
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap@0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Data.json
[
"jobId": "1",
"loaded": 15000,
"error":6000,
"priced":5000
,
"jobId": "2",
"loaded": 15000,
"error":6000,
"priced":8000
]
statusTemplate.html
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: (row.entity.priced/row.entity.loaded)*100|number:2% ;">
(row.entity.priced/row.entity.loaded)*100|number:2%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2% ;">
((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2%
</div>
<div class="progress-bar progress-bar-danger" style="width: (row.entity.error/row.entity.loaded) *100|number:2% ;">
(row.entity.error/row.entity.loaded) *100|number:2%
</div>
</div>
app.js
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http)
$scope.gridOptions =
columnDefs: [
name: 'jobId' ,
name: 'status', cellTemplate: 'statusTemplate.html'
]
;
$http.get('data.json')
.success(function (data)
$scope.gridOptions.data = data;
);
])
;
任何解释都非常感谢
更新
这适用于 Firefox、Safari 和 Chrome
【问题讨论】：
Brahim - 你有没有找到解决方案？我在 IE 11 中遇到了同样的问题 “Shak Smith”在他的回答中给出了解决方案，但由于这个原因，解释不太好，我没有将其视为答案 【参考方案1】：您可能遇到的问题之一是访问被拒绝。当脚本试图从当前页面的主机之外的源访问数据时，就会发生这种情况。检查此链接：https://msdn.microsoft.com/library/dn887953(v=vs.94).aspx。检查此链接以了解如何禁用 Disable same origin policy Internet Explorer。 此外，您应该只使用 ng-style 而不是 style。 这是一个 plunkr http://plnkr.co/edit/X2SROdoYsUJ1MKwkbNUQ?p=preview
<div class="progress">
<div class="progress-bar progress-bar-success" ng-style="'width': (row.entity.priced/row.entity.loaded)*100 + '%' ">
(row.entity.priced/row.entity.loaded)*100|number:2%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" ng-style="'width': ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100 + '%' ">
((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2%
</div>
<div class="progress-bar progress-bar-danger" ng-style="'width': ((row.entity.error/row.entity.loaded)*100) + '%' ">
(row.entity.error/row.entity.loaded) *100|number:2%
</div>
</div>
【讨论】：
以上是关于Ui-grid 角度表达式在 IE 11 中未按预期呈现的主要内容，如果未能解决你的问题，请参考以下文章