角度uiグリッドリピートcellTemplates on virtual scroll

いくつかの列に角度uiグリッドcellTemplateをテストし、スクロール時にカスタムcellTemplatesを表示するセルを除いてデータが正しく更新されていることに気付きました。 http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview 角度uiグリッドリピートcellTemplates on virtual scroll

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/[email protected]/ui-grid.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script> 
    <script src="https://npmcdn.com/[email protected]/ui-grid.min.js"></script> 
    <script src="https://npmcdn.com/[email protected]/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>

出典

2017-06-19 Al Ex Tsm

、私はそれを任意の場所に使用されて表示されません。期待される結果は何ですか？ – Raulucco

@Raulucco plnkrに追加したディレクティブに質問してくれてありがとう、問題の解決策です... –

ソリューション：COL_FIELDにウォッチャーにディレクティブを追加します。

ここ

は不要な動作がplnkrを経て再現されます

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

の

JS：私はあなたのplunker内のディレクティブを理解していない

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

出典

2017-06-19 10:52:56

角度uiグリッドリピートcellTemplates on virtual scroll

答えて

関連する問題