Uday Malangave Uday Malangave - 4 months ago 38
Javascript Question

ui-grid api undefined after return from another controller

Please go through plunker

vm.gridOptions = {
enableSorting: true,
columnDefs: [
{field: 'deviceName'},
{field: 'ip'},
{
field: 'Action', enableSorting: false,
cellTemplate: '/monitoring_page/modals/buttonTemplate.html'
}
],
data: vm.dataStack,
onRegisterApi: function (gridApi) {
vm.gridApiSource = gridApi;
}
};
//api call after coming from ui-bootstrap modal
vm.gridApiSource.core.refresh();


http://plnkr.co/edit/Oxo8XdQCysOUvfvhD82z?p=preview

In console gridApiSoucrce is undefined. . .

Answer

Figured it out of after a bit of work - Click for Plnkr:

  1. Add appScopeProvider: vm to your grid options
  2. Redeclare your grid as <div ui-grid="vm.gridOptions" ui-grid-pagination ui-grid-save-state class="cover-block"></div>
  3. Change your body declaration to <body ng-controller="monitoringCtrl as vm"> and update all your calls to use vm.

    Example:  ng-click="monitoringCtrl.addDevice()" 
    

    should now be:

    ng-click="vm.addDevice()"
    
  4. Remove ng-controller="monitoringCtrl as monitoringCtrl from button.html, it is creating 8 instances of your controller due to that line of code.

  5. Test It Out

enter image description here

If this works for you, please accept it for future users to replicate.