CODEWITHSUNDEEP
javascriptangularjsag-grid
monkeyWithAMachinegun
monkeyWithAMachinegun

Reputation: 331

Angularjs Ag-grid api undefined in child controller

I'm creating an html page that allows users to create tests (which then are stored in a database), and also manage them in an instance of ag-grid. Each part utilizes a different controller - the creation bit uses testManager, and the grid uses testUITableManager. Here's the gist of the html part:

<md-tab label="Create Test">
        <md-content class="md-padding">
            <div ng-controller="testManager">  
                    <div>
                <...all the field options...>
                    </div>

            <div ng-controller="testUITableManager" style="clear: both;">
                <div class="create-button">
                    <button id="TestUITable" ng-click="createTest(); loadUITableData()">Create Test</button>
                    <br>
                </div> 
           </div>

Then, below the creation part is the table view:

 <div id="TestUITable" ng-controller="testUITableManager" ng-init="loadUITableData()">

The fields all appear, and the grid appears, and is populated with the current contents of the database. The trouble occurs when I click the create button. As you can see in the code above, I have ng-click calling two methods, createTest() which is a function of the testManager controller and loadUITableData() which is a function of the testUITableManager controller. The createTest() call works fine, and if I remove the loadUITableData() call from ng-click, then it adds the test to the database but doesn't refresh the table. If I add the loadUITableData() call, then it does call that method inside the testUITableManagerController, but when it attempts to load the data I get an error at the line: $scope.TestUITableGrid.api.setRowData($scope.data) because $scope.TestUITableGrid.api is undefined. Here's the loadUITableData function:

// load the data into the table
$scope.loadUITableData = function() {
    $http.get('/trm/get_test_info_from_database').success(
    function(data) {
            $scope.data = data;
            $scope.rowCount = $scope.data.length;
            $scope.TestUITableGrid.api.setRowData($scope.data);
            $scope.TestUITableGrid.api.sizeColumnsToFit();
    }); 
};

I feel like there's something simple that I'm missing here. If I put the table grid on a separate page and only use the testUITableManager controller, then it works fine, it only seems to be when I try and make that controller a child of the testManager controller that I hit this issue. Does anyone know what I might be doing wrong?

Upvotes: 1

Views: 338

Answers (1)

Ostoja
Ostoja

Reputation: 119

Try binding your functions to vm variable where var vm = this; instead of $scope and use <div ng-controller="testManager as testManger"> so when you call functions on ng-click it would look like ng-click="testManager.createTest(); same goes for testUITableManager controller

other solution is to broadcast an event from your createTest function $rootScope.$broadcast('refreshData'), and then add event listener in child controller $scope.$on('refreshData', function(){ $scope.loadUITableData() })

Upvotes: 2

Related Questions