La fonction onRegisterApi n'est pas appelée, ui-grid

Question

J'essaie d'afficher la table en utilisant ui-grid. La table est affichée correctement mais sans appeler la fonction onRegisterApi. Je n'ai même pas remarqué que l'affichage de la table a bien fonctionné jusqu'à ce que je voulais utiliser la méthode vm.gridApi.core.refresh(). Lorsque j'ai ajouté cette méthode, il m'a donné vm.gridApi erreur non définie.

Mon contrôleur ressemble à ceci:

function userEventData (resp) { 
      $http({ 
       method: "GET", 
       url: resp.results["@href"] 
      }).success(function (responseData) { 
       logger.info("userEventData responseData", responseData); 
       vm.gridOptions.data = responseData; 
       logger.info("gridOptions", vm.gridOptions.data); 
       poulateGrid(); 
       //return responseData; 
      }); 
     } 

function populateGrid() { 
      logger.info("populateGrid function activated"); 
      vm.dateFormat = "medium"; 
      var temp = vm.gridOptions.data; 
      vm.gridOptions = { 
       enableColumnMenu: true, 
       enableFiltering: true, 
       enableSelectAll: true, 
       rowTemplate: gridService.getRowTemplate(), 
       excludeProperties: ["meta"], 
       onRegisterApi: function (gridApi) { 
        logger.info("onRegisterApi activated"); 
        vm.gridApi = gridApi; 
        logger.info("vm.gridApi when defined", vm.gridApi); 
        vm.gridApi.grid.registerRowsProcessor(vm.singleFilter(), 200); 
       }, 
       columnDefs: [ 
        { 
         field: "sun", 
         displayName: "Init User", 
         allowCellFocus: false, 
         enableGrouping: true, 
        }, 
        { 
         field: "dun", 
         displayName: "Target User", 
         allowCellFocus: false, 

        }, 
        { 
         field: "evt", 
         displayName: "Name", 
         allowCellFocus: false 
        }, 
        { 
         field: "dip", 
         displayName: "What is affected", 
         allowCellFocus: false 
        }, 
        { 
         field: "det", 
         displayName: "Time created", 
         allowCellFocus: false, 
         cellFilter: "date:grid.appScope.vm.dateFormat" 
        } 
       ] 

      } 

html

<div ui-grid="vm.gridOptions" style="padding-top: 1%;">

Toute idée pourquoi cela se passe? Merci!

Answer 1

Vous appelez la fonction populateGrid() après avoir initialisé vm.gridOptions.data avec les données de votre requête HTTP.

Essayez réorganisant votre code pour faire quelque chose comme ceci:

vm.gridOptions = {}; // must have gridOptions defined first 

function userEventData (resp) { 
      $http({ 
       method: "GET", 
       url: resp.results["@href"] 
      }).success(function (responseData) { 
       logger.info("userEventData responseData", responseData); 
       logger.info("gridOptions", vm.gridOptions.data); 
       populateGrid(); // call this first 
       vm.gridOptions.data = responseData; // now you can load the data 
       //return responseData; 
      }); 
     } 

function populateGrid() { 
      logger.info("populateGrid function activated"); 
      vm.dateFormat = "medium"; 
      // var temp = vm.gridOptions.data; // this wont exist yet 
      vm.gridOptions = { 
       enableColumnMenu: true, 
       enableFiltering: true, 
       enableSelectAll: true, 
       rowTemplate: gridService.getRowTemplate(), 
       excludeProperties: ["meta"], 
       onRegisterApi: function (gridApi) { 
        logger.info("onRegisterApi activated"); 
        vm.gridApi = gridApi; 
        logger.info("vm.gridApi when defined", vm.gridApi); 
        vm.gridApi.grid.registerRowsProcessor(vm.singleFilter(), 200); 
       }, 
       columnDefs: [ 
        { 
         field: "sun", 
         displayName: "Init User", 
         allowCellFocus: false, 
         enableGrouping: true, 
        }, 
        { 
         field: "dun", 
         displayName: "Target User", 
         allowCellFocus: false, 

        }, 
        { 
         field: "evt", 
         displayName: "Name", 
         allowCellFocus: false 
        }, 
        { 
         field: "dip", 
         displayName: "What is affected", 
         allowCellFocus: false 
        }, 
        { 
         field: "det", 
         displayName: "Time created", 
         allowCellFocus: false, 
         cellFilter: "date:grid.appScope.vm.dateFormat" 
        } 
       ] 
      } 
      }