解决承诺后，视图中的数据未更新 [英] Data is not getting updated in the view after promise is resolved

问题描述

我将我的 Rails 应用程序用作 API 后端.所以我有一个单页角度应用程序，它将进行多个 api 调用并在每个数据返回时开始显示.我不想等待 API 调用的所有结果然后加载数据，所以我开始学习 deferred 和 promise.

I am using my Rails app as an API backend. So I have a single page angular app which will make multiple api calls and start displaying as each data gets returned. I don't want to wait for all the results from the API call and then load the data, so I started learning deferred and promise.

我有一个名为 api 的角度服务，我将在其中对我的所有 api 进行 $http 调用.为了测试目的，我已经硬编码了从每个 api 调用返回的数据.

I have an angular service called api where I will have $http calls to all my api. I have hardcoded the data that returns from each one of the api calls for testing purposes.

debugger.factory "api", ["$resource", "$q", ($resource, $q) ->
  apiCall1 = [
    key1: "v1"
    key2: "v2"
    key3: "v3"
  ]

  apiCall2 =
  .
  .
  .
  apiCall7 =

  factory = getIsDynamicApp: ->
    deferred = $q.defer()
    deferred.resolve apiCall1
    deferred.promise

  factory
]

我创建了一个边缘服务来调用我的 api 服务中的方法.我已经使用 $timeout 来模拟异步 api 调用.

I have created an edge service to call methods from my api service. I have used $timeout to simulate the async api calls.

debugger.factory "EdgeService", ($resource, api, $q, $timeout, $http) ->

  fetchIsDynamic = ->
    api.getIsDynamicApp()   

  tickets: ->
    deferred = $q.defer()
    fetchIsDynamic().then (data) ->
      $timeout (->
        deferred.resolve data
        console.log data #<- this works, I can see the data
      ), 3000  
    deferred.promise

在我的 EdgeController 中，我调用服务并将值附加到 $scope.data

In my EdgeController I call the service and attach the value to $scope.data

debugger.controller "EdgeController", ($scope, EdgeService) ->
  $scope.load = ->
    $scope.data = EdgeService.tickets()

debugger.$inject = ["$scope"]

这是我的苗条模板

doctype html
html(ng-app="debugger" class="ng-scope")
  head
    title Ads Debugger
    = stylesheet_link_tag    "application/debugger"
    = javascript_include_tag "debugger"

  body
    #content(ng-controller="EdgeController")
      .search_form
        form class="serch_form"
          input type="text" name="search_box" id="search_box"
          input type="submit" value="Search" ng-click="load()"

      div
        pre message {{data}}

输出未绑定'

如果我必须进行多个 api 调用并在每个返回时更新视图，这也是实现的最佳方式吗?

推荐答案

$scope.data = EdgeService.tickets()

应该是

EdgeService.tickets().then (data) ->
 $scope.data = data

AngularJS 不会自动解包承诺在较新版本中.这适用于旧版本的 Angular.

AngularJS does not automatically unwrap promises in newer versions. This would work in older versions of Angular.

要执行多个相互依赖的 API 调用，您可以这样做

To do multiple API calls dependant of one another you can do

callA
.then(callB)
.then(callC)

你可以使用 $q.all 并行执行多个操作

Yo can do multiple in parallell using $q.all

$q.all([callA, callB, callC]).then( .... )

这篇关于解决承诺后，视图中的数据未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！