回调范围未访问 AngularJS 服务中的函数

Posted 2023-03-03

【中文标题】回调范围未访问 AngularJS 服务中的函数

【英文标题】：Callback scope not accessing function in AngularJS Service

【发布时间】：2015-08-10 19:10:29

【问题描述】：

我有一个 AngularJS 服务，其代码如下。我做了 2 个 Promises，然后想调用该服务的功能。但是，由于回调在不同的范围内，我无法继续。知道该怎么做吗？

app.service "ServiceName", [                                 

  "AnotherService"                                                                
  "MyService"                                                                   

  (AnotherService, MyService) ->                                                         

    @dataFromA = []                                                       
    @dataFromB = []                                                    

    @mashupData = () ->                                           
      debugger                                                           

    @getDatafromA = () ->
      //getDataFromDBAndReturn

    @mainServiceFunction = () ->                              
      @getDatafromA().then (response) ->              
        @dataFromA = response                                          
        MyService.dataFromB().then (response) ->         
          @dataFromB = response                                           
          @mashupData() //Gives Undefined Error                                           

return                       
]

理想情况下，在调用 mainservicefunction 时，我希望它从 A、n B 获取数据，然后运行 ​​mashupData，它使用 @dataFromA 和 @dataFromB。

我该怎么做呢？

【问题讨论】：

Scope in coffeescript classes 的可能重复项

【参考方案1】：

您无需在 coffeescript 中使用 .bind - 它作为语言的一部分受到支持。用=> 箭头（维护this 的函数）替换所有-> 箭头（普通JS 函数）：

(AnotherService, MyService) ->                                                         

  @dataFromA = []                                                       
  @dataFromB = []                                                    

  @mashupData = () =>                                           
    debugger                                                           

  @getDatafromA = () =>
    //getDataFromDBAndReturn

  @mainServiceFunction = () =>                              
    @getDatafromA().then (response) =>              
      @dataFromA = response                                          
      MyService.dataFromB().then (response) =>         
        @dataFromB = response                                           
        @mashupData() // Will corretly resolve `this`                                       

【参考方案2】：

只需将正确的上下文与Function.prototype.bind 绑定：

app.service "ServiceName", [                                 

  "AnotherService"                                                                
  "MyService"                                                                   

  (AnotherService, MyService) ->                                                         

    @dataFromA = []                                                       
    @dataFromB = []                                                    

    @mashupData = () ->                                           
      debugger                                                           

    @getDatafromA = () ->
      debugger

    @mainServiceFunction = () ->                              
      @getDatafromA().then ( (response) ->              
        @dataFromA = response                                          
        MyService.dataFromB().then ( (response) ->         
          @dataFromB = response                                           
          @mashupData()                                          
        ).bind(this)
      ).bind(this)
]