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

问题描述

我用我的Rails应用程序作为一个API后端。所以我有一个单页角的应用程序，这将使多个API调用，并开始显示每个数据被返回。我不想等待所有从API调用的结果，然后加载数据，所以我开始学习递延和承诺。

我有一个名为角服务的 API 在那里我将有$ HTTP调用我的所有API。我已经很难codeD，从API调用用于测试目的的每一个返回的数据。

  debugger.factoryAPI，[$资源，$ Q，（$资源，$ Q） -  GT;
  apiCall1 = [
    KEY1：V1
    KEY2：V2
    KEY3：V3
  ]  apiCall2 =
  。
  。
  。
  apiCall7 =  工厂= getIsDynamicApp： - ＆GT;
    递延= $ q.defer（）
    deferred.resolve apiCall1
    deferred.promise  厂
]
 

我已经创建了一个边缘服务调用从我的API服务的方法。我已经使用$超时模拟异步API调用。

  debugger.factoryEdgeService（$资源，API，$ Q $超时，$ HTTP） -  GT;  fetchIsDynamic =  - ＆GT;
    api.getIsDynamicApp（）  门票： - ＆GT;
    递延= $ q.defer（）
    fetchIsDynamic（）然后（数据） - 过夜。;
      $超时（ - ＆GT;
        deferred.resolve数据
        数据的console.log＃＆LT;  - 这工作，我可以看到数据
      ），3000
    deferred.promise
 

在我EdgeController我所说的服务和价值附加到$ scope.data

  debugger.controllerEdgeController（$范围，EdgeService） -  GT;
  $ scope.load =  - ＆GT;
    $ scope.data = EdgeService.tickets（）调试器。$注射=$范围]
 

这是我的苗条的模板

  DOCTYPE HTML
HTML（NG-应用=调试级=NG-范围）
  头
    标题广告调试
    = stylesheet_link_tag应用程序/调试
    = javascript_include_tag调试  身体
    ＃内容（NG-控制器=EdgeController）
      .search_form
        窗体类=serch_form
          INPUT TYPE =文本名称=search_boxID =search_box
          输入类型=提交值=搜索NG-点击=load（）的      DIV
        pre消息{{数据}}
 

输出没有得到绑定

另外这是落实，如果我必须做出多个API调用和更新视图为每一个回报的最佳方式？

解决方案

  $ scope.data = EdgeService.tickets（）
 

应

  EdgeService.tickets（），那么（数据） -  GT。
 $ scope.data =数据
 

AngularJS不会自动解开承诺在较新版本。这会工作在老版本的角度。

要做到多个API调用依赖一个另一个你可以做

 马蹄莲
。然后（callB）
。然后（CALLC）
 

哟可以通过做多之间平行$ q.all

  $ q.all（[马蹄莲，callB，CALLC]），然后（....）
 

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.

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
]

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

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"]

This is my slim template

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

The output is not getting binded'

Also is this the best way to implement if I have to make multiple api calls and update the view as each one returns?

解决方案

$scope.data = EdgeService.tickets()

Should be

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

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

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

callA
.then(callB)
.then(callC)

Yo can do multiple in parallell using $q.all

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

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