指令的angularjs typescript控制器类中未定义的范围变量

Posted 2023-03-13

【中文标题】指令的angularjs typescript控制器类中未定义的范围变量

【英文标题】：Scope Variable undefined in angularjs typescript controller class of directive

【发布时间】：2016-05-25 15:31:41

【问题描述】：

我已经在 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>

问题：当我尝试在控制器范围变量（如 agGridOptions）中调用 api 方法 populateData() 时未定义，然后 rest 不起作用。 为什么当我调用公共 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 变得未定义。

【问题讨论】：

我也使用打字稿，但目前@新手级别，我知道要传递“this”，您需要像这样声明您的函数：populateData = () => this.agGridOptions.api. setRowData(options.rowData); （等于 & 大于是这里的关键元素）

（当我再次阅读时听起来很不尊重，但我只是不确定你的语法，也许这是我不熟悉的东西......）

嗨@ZivWeissman 感谢您的回复。但是当我尝试 this.api = populateData(options:any) => this.agGridOptions.api.setRowData(options.rowData); 它的语法错误..不确定这个

试试这个：this.api = populateData:(options) => this.agGridOptions.api.setRowData(options.rowData);

嗨@ZivWeissman 我试过但是当我稍后调用populateData 方法时this.agGridOptions 仍然是未定义的。有什么问题任何帮助将不胜感激

【参考方案1】：

您在函数中调用的“this”指的是函数本身，而不是您的控制器-

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

语法应该改成()=>（这会让typescript编译器'转移'this，它会在js文件中变成_this）

应该是这样的：

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