Question

我已经在ag网格上创建了包装指令，如下所示

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

我的控制器类如下所示：

 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*****/
}

html中的我的指令标签如下所示

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

问题：当我试图在控制器范围变量中调用api方法populateData（）时，agGridOptions是未定义的，然后休息不起作用。当我调用public api时，为什么变量agGridOptions不可用？请帮助..当我编写正常的js函数方式控制器但不使用typescript类控制器时，它工作正常。任何帮助将不胜感激

我调用控制器方法如下：

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

当控制器第一次调用控制器中的所有变量值时，如gridOptions，agGridOptions正确获取。但当我调用api populateData来显示获取的数据时，agGridOptions未定义。

Answer 1

＆＃39; this＆＃39;你在函数中调用的是指函数本身，而不是你的控制器 -

QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  {
border-image: none;
image: url(C:/..../folder.svg);
width: 19px;
height: 16px;
margin: 2px 0px 2px 4px;
}

语法应更改为（）=＆gt; （这会使打字稿编译器转移到这个，它会在js文件中变成_this）

它应该是这样的：

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

范围变量undeI在angularjs typescript控制器类的指令中

1 个答案: