I have implemented a custom directive to wrap ag grid like so:
function MyDirective(): ng.IDirective {
var directive = <ng.IDirective>{
restrict: "E",
template: '<div style="width: 100%; height: 400px;" ag-grid="vm.agGridOptions" class="ag-fresh ag-basic"></div>',
scope: { gridOptions: '=', rowClicked: "&", api: '=' },
controller: gridController,
controllerAs: 'vm',
bindToController: true
}
return directive;
}
angular.module("angularWithTS").directive("myDirective", MyDirective);
This is the structure of my controller class:
export class gridController {
public agGridOptions: any = {};
public api: any = {};
public gridOptions: any;
public rowClicked: any;
constructor() {
this.initialize();
}
private initialize() {
/*****Contoller Logic*****/
var columnDefs = commonFunctions.convertToAgColumns(this.gridOptions.columnDefinitions);
this.agGridOptions.enableSorting = true;
this.agGridOptions.editable = true;
this.agGridOptions.enableColResize = true;
this.agGridOptions.columnDefs = columnDefs;
/*****Contoller Logic*****/
/*****Exposed Events*****/
this.agGridOptions.onRowClicked = function (event) {
this.rowClicked({ index: event.rowIndex });
};
/*****Exposed Events*****/
/*****Public Api*****/
this.api = {
populateData: function (options) {
this.agGridOptions.api.setRowData(options.rowData);
}
}
}
/*****Public Api*****/
}
The directive tag in HTML is structured as follows:
<my-directive grid-options="options" api="gridApi"></my-directive>
My question pertains to an issue where the variable `agGridOptions` becomes undefined when calling the public API method `populateData()` in the controller. Why is `agGridOptions` unavailable when invoking the public API? Any assistance would be greatly appreciated.
The method call in the controller is made in the following manner:
$scope.gridApi = {};
$scope.options = {};
$scope.options.columnDefinitions = $scope.columnDefinitions;
$http.get("monthlySales.json").then(function (response) {
$timeout(function () {
$scope.options.rowData = response.data;
$scope.gridApi.populateData($scope.options);
},2000);
});
Initially, when the controller is invoked, all variables such as `gridOptions` and `agGridOptions` hold their respective values correctly. However, `agGridOptions` becomes undefined when calling the `populateData()` API to display retrieved data.