Search code examples
javascriptangularjsangularjs-scopeangular-ui-gridui-grid

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

Solution

  • 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.