angular ui 网格在虚拟滚动条上重复 cellTemplates

Question

我已经在某些列上测试了 angular ui-grid cellTemplate，并注意到滚动时数据会正确更新，但显示自定义 cellTemplates 的单元格除外。

这是通过 plnkr 重现的不良行为：http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview

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:

<!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>

Answer 1

解决方案：在 COL_FIELD 上添加带有观察者的指令：

工作：plnkr：http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview

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);
}]);

angular ui 网格在虚拟滚动条上重复 cellTemplates

angular ui grid repeats cellTemplates on virtual scroll

javascript

angularjs

ui-grid