Scope Variable undefined in angularjs typescript controller class of directive

Question

I have created wrapper directive over ag grid as below

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);

My controller class looks like below:

 export class gridController {
    public agGridOptions: any = {};
    public api: any = {};
    public gridOptions: any;
    public rowClicked: any;
    constructor() {
        this.Process();
    }
    private Process() {
        /*****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*****/
}

My directive tag in html looks like below

<my-directive grid-options="options" api="gridApi"></my-directive>

Question: When i tries to call api method populateData() in controller scope variables like agGridOptions is undefined and then rest is not working. Why variable agGridOptions is not available when i call public api ? Please help.. its working fine when i code normal js functions way controller but not working with typescript class controller. Any help would be appreciated

I m calling controller method like below:

     $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);
    });

When controller invoked first time all the values of variables in controller like gridOptions,agGridOptions are properly get. But agGridOptions getting undefined when i call api populateData to show fetched data.

I use typescript as well, but currently @ novice level, I know that to pass "this" you need to declare your function like this: populateData = () => {this.agGridOptions.api.setRowData(options.rowData); } (the equal & greater than is the key element here) — Ziv Weissman
– Ziv Weissman, Commented Feb 14, 2016 at 20:18
(it sounds disrespecting when I read this again but I am just not sure about your syntax, maybe it is something i am not familiar with...) — Ziv Weissman
– Ziv Weissman, Commented Feb 14, 2016 at 20:25
hi @ZivWeissman thanks for the reply. but when i tried this.api = { populateData(options:any) => { this.agGridOptions.api.setRowData(options.rowData); } } its syntax error..Not sure about this — Kiran Saravade
– Kiran Saravade, Commented Feb 14, 2016 at 20:34
try this: this.api = { populateData:(options) => { this.agGridOptions.api.setRowData(options.rowData); } } — Ziv Weissman
– Ziv Weissman, Commented Feb 14, 2016 at 21:21
Hi @ZivWeissman I had tried but still this.agGridOptions is undefined when i call populateData method later. Whats wrong any help would be appreciated — Kiran Saravade
– Kiran Saravade, Commented Feb 15, 2016 at 4:44

Ziv Weissman · Accepted Answer · 2016-02-16 08:10:34Z

3

The 'this' you are calling to in your function is referring to the function itself, and not your controller-

this.api = {
        populateData: function (options) {
            this.agGridOptions.api.setRowData(options.rowData); //(this = populateData function)
        }
    }

The syntax should be changed to () => (this will make typescript compiler to 'transfer' the this, it will become _this in the js file)

It should look like this:

this.api.populateData =  (options)=> {
            this.agGridOptions.api.setRowData(options.rowData);    
    }

answered Feb 16, 2016 at 8:10

Ziv Weissman

4,5664 gold badges31 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Scope Variable undefined in angularjs typescript controller class of directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related