AngularJS 1.6 + ES6 - 将jquery ui-grid回调数据返回到控制器[重复]

Posted 2023-05-09

【中文标题】AngularJS 1.6 + ES6 - 将jquery ui-grid回调数据返回到控制器[重复]

【英文标题】：AngularJS 1.6 + ES6 - Returning jquery ui-grid callback data to controller [duplicate]

【发布时间】：2018-06-04 21:57:27

【问题描述】：

我在我的控制器中定义了一个 jquery ui-grid 组件，其缩小示例如下所示：

class myController 
    constructor($scope)         

        this.$scope = $scope; 

        this.Grid =                                

            selectionSettings:
                clientHandler:function(key,object,data)
                    console.log(key);
                    console.log(object);
                    console.log(data);                    
                    console.log(this);
                    return data;                        
                    //the scope of this function is different from the controller scope.                          
                                  
           
       

       receiver(data)
             doSomething(data);
       
    ...

这个想法是，当我在网格中选择一个条目时，会触发 clientHandler 中的函数。然后我希望这个函数在这个类中将该数据传递给接收器函数。

但是由于这个clientHandler 函数和receiver() 在不同的范围内，我不能直接使用this 关键字来这样做。

*** 上的其他答案建议使用 $scope 对象来完成相同的操作，但我无法这样做。

使clientHandler 函数调用receiver() 需要什么？

真诚欢迎任何指导。谢谢

【问题讨论】：

要么（自己打电话给receiver）要么save this in a self variable。

那行得通。谢谢

虽然我可以在浏览器控制台上看到更改，但我无法在我的 UI 上传播由 callbackHandler 引起的更改。我正在尝试手动调用$doCheck() 生命周期挂钩以反映相同的情况，但这没有任何区别。哪个生命周期钩子可以将此更改传播到 UI？

【参考方案1】：

ES6 箭头函数的存在是为了提供词法 this 并避免 self = this 技巧，这在 ES6 中通常是不必要的：

clientHandler: (key,object,data) => 
  this.receiver(data);   
  

【讨论】：

我试过这个 - 没用。还是谢谢

var self = this 是 ES6 中的反模式。箭头函数应该完全取代它。答案中的代码与您发布的代码是惯用的。

【参考方案2】：

感谢 Adelin 的提醒

这是最终的工作代码：

class dashboardController 
    constructor(dashboardService, $scope) 
        this.$scope = $scope;      

        var self = this;

        this.Grid = 

            selectionSettings:                
               clientHandler:function(key,object,data)
                   self.receiver(data);                 
                            
        

        receiver(data)
             this.selected = data;
             this.$scope.$apply(); //to propagate the change to the UI, if needed