当Angular更改时,子弹颜色在Chrome中无法正确显示
Nan*_*ard 8 html javascript css google-chrome angularjs
任何人都可以解释为什么这些子弹会在Firefox和IE中正确改变颜色,但不能在Chrome中改变颜色(我目前的版本是47.0.2526.106)？为什么第一颗子弹会ul保持白色,但其他子弹最初会改变？
请注意,无论是绑定class还是使用ng-class属性,我都会遇到相同的行为.
有没有办法让颜色正确更新？
火狐/ IE:
铬:
angular.module('myApp', [])
.controller('myCtrl', [
'$scope',
'$interval',
function($scope, $interval) {
var values = ['Hello', 'Oops', 'Uh-Oh...'];
var classes = ['good', 'warning', 'danger'];
var nItems = 8;
$scope.items = [];
for (var i = 0; i < nItems; i++) {
$scope.items.push({});
}
function updateItems() {
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
var chosen = Math.floor(Math.random() * values.length);
item.value = values[chosen];
item.class = classes[chosen];
}
}
$interval(updateItems, 3000);
}
]);body {
background: #333;
color: white;
}
ul {
display: inline-block;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>更新
大约一年后回到这一点,似乎谷歌已经修复了造成这种情况的渲染错误,尽管我不确定哪个版本包含了修复程序.我在Chrome v56.0.2924.87上不再看到此问题.
这是Chrome渲染错误.
一种选择是使用伪元素插入自定义项目符号点.
ul {
display: inline-block;
list-style: none;
}
ul li:before {
content: '\2022';
text-indent: -1em;
display: inline-block;
}
这是更新的示例:
angular.module('myApp', [])
.controller('myCtrl', [
'$scope',
'$interval',
function($scope, $interval) {
var values = ['Hello', 'Oops', 'Uh-Oh...'];
var classes = ['good', 'warning', 'danger'];
var nItems = 8;
$scope.items = [];
for (var i = 0; i < nItems; i++) {
$scope.items.push({});
}
function updateItems() {
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
var chosen = Math.floor(Math.random() * values.length);
item.value = values[chosen];
item.class = classes[chosen];
}
}
$scope.getItemValue = function(item) {
return item.value;
};
$interval(updateItems, 3000);
}
]);body {
background: #333;
color: white;
}
ul {
display: inline-block;
list-style: none;
}
ul li:before {
content: '\2022';
text-indent: -1em;
display: inline-block;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>另一种选择是触发重绘事件以强制浏览器更新样式.这绝对是一个hackish选项,但它仍然有效:
function forceRepaint() {
document.body.style.display = 'none';
document.body.offsetHeight;
document.body.style.display = '';
}
这是另一个更新的例子:
angular.module('myApp', [])
.controller('myCtrl', [
'$scope',
'$interval',
function($scope, $interval) {
var values = ['Hello', 'Oops', 'Uh-Oh...'];
var classes = ['good', 'warning', 'danger'];
var nItems = 8;
$scope.items = [];
for (var i = 0; i < nItems; i++) {
$scope.items.push({});
}
function updateItems() {
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
var chosen = Math.floor(Math.random() * values.length);
item.value = values[chosen];
item.class = classes[chosen];
forceRepaint();
}
}
$scope.getItemValue = function(item) {
return item.value;
};
$interval(updateItems, 3000);
}
]);
function forceRepaint() {
document.body.style.display = 'none';
document.body.offsetHeight;
document.body.style.display = '';
}body {
background: #333;
color: white;
}
ul {
display: inline-block;
}
.good {
color: limegreen;
}
.warning {
color: yellow;
}
.danger {
color: red;
}<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li class="{{item.class}}" ng-repeat="item in items">{{item.value}}</li>
</ul>
<ul>
<li ng-class="{'good': item.class==='good', 'warning': item.class==='warning', 'danger': item.class==='danger'}" ng-repeat="item in items">{{item.value}}</li>
</ul>
</body>
</html>| 归档时间： |
|
| 查看次数： |
258 次 |
| 最近记录： |