[英]angular ui grid repeats cellTemplates on virtual scroll
I have tested an angular ui-grid cellTemplate on some of the columns and have noticed that on scroll the data is updated correctly by exception of the cells that display custom cellTemplates. 我在某些列上测试了有角度的ui-grid cellTemplate,并注意到在滚动时,除显示自定义cellTemplates的单元格外,数据已正确更新。
Here is the unwanted behaviour reproduced via plnkr: http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview 这是通过plnkr复制的有害行为: http ://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview
JS: JS:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.autoFitColumns','ui.grid.resizeColumns']);
app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) {
var customTemp = '<img ng-init="url=COL_FIELD" src="https://dummyimage.com/100x100/000/fff&text={{url}}" alt="Smiley face" height="100" width="100">'
$scope.gridOptions = {};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
$scope.gridOptions.rowHeight = 50;
$scope.gridOptions.columnDefs = [
{ name:'eee' },
{ name:'age' },
{ name:'address.street'}
];
$scope.gridOptions2 = {};
$scope.gridOptions2.data =[];
$scope.gridOptions2.rowHeight =100;
$scope.gridOptions2.columnDefs =[];
var timer = function() {
for (i = 1; i < 100; i++) {
$scope.gridOptions2.data.push({
value:i,
name:'Name'+i,
url:'https://dummyimage.com/30x30/000/fff&text='+i,
image:i
});
}
$scope.gridOptions2.columnDefs =[{
name:'image',
cellTemplate:customTemp,
width:100
},
{
name:'name',
cellTemplate:customTemp,
width:100
},
{
name:'url',
width:50
},
{
name:'value'
}
];
};
$timeout(timer,0);
console.log($scope.gridOptions);
console.log($scope.gridOptions2);
}]);
HTML: HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://npmcdn.com/angular-ui-grid@latest/ui-grid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<script src="https://npmcdn.com/angular-ui-grid@latest/ui-grid.min.js"></script>
<script src="https://npmcdn.com/ui-grid-auto-fit-columns@latest/dist/autoFitColumns.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div>
<div ui-grid="gridOptions2"
ui-grid-auto-fit-columns
ui-grid-pagination
ui-grid-resize-columns
class="full-height"></div>
<div ui-grid="gridOptions"
ui-grid-auto-fit-columns
ui-grid-pagination
ui-grid-resize-columns
class="full-height"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Solution: add a directive with a watcher on COL_FIELD: 解决方案:在COL_FIELD上添加带有观察者的指令:
working: plnkr: http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview 工作:plnkr: http ://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p = preview
js: JS:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.autoFitColumns','ui.grid.resizeColumns']);
app.directive('myDirective', function ($log) {
return {
restrict: 'E',
replace: true,
scope: {
url: '='
},
template: '<img src="https://dummyimage.com/100x100/000/fff&text={{url}}" alt="Smiley face" height="100" width="100">',
link: function (scope, element, attrs) {
scope.$watch('url', function(newValue) {
var url = newValue;
});
}
};
});
app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) {
var customTemp = '<div><my-directive url="MODEL_COL_FIELD" /></div>';
$scope.gridOptions = {};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
$scope.gridOptions.rowHeight = 50;
$scope.gridOptions.columnDefs = [
{ name:'eee' },
{ name:'age' },
{ name:'address.street'}
];
$scope.gridOptions2 = {};
$scope.gridOptions2.data =[];
$scope.gridOptions2.rowHeight =100;
$scope.gridOptions2.columnDefs =[];
var timer = function() {
for (i = 1; i < 100; i++) {
$scope.gridOptions2.data.push({
value:i,
name:'Name'+i,
url:'https://dummyimage.com/30x30/000/fff&text='+i,
image:i
});
}
$scope.gridOptions2.columnDefs =[{
name:'image',
cellTemplate:customTemp,
width:100
},
{
name:'name',
cellTemplate:customTemp,
width:100
},
{
name:'url',
width:50
},
{
name:'value'
}
];
};
$timeout(timer,0);
console.log($scope.gridOptions);
console.log($scope.gridOptions2);
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.