angularjs - papa - Los datos no se actualizan en la vista una vez que se ha resuelto la promesa

john papa angular español

Question

Estoy usando mi aplicación Rails como un backend API. Así que tengo una aplicación de una sola página angular que hará múltiples llamadas de API y comenzará a mostrar a medida que se devuelvan los datos. No quiero esperar todos los resultados de la llamada API y luego cargar los datos, así que comencé a aprender diferido y prometedor.

Tengo un servicio angular llamado api donde tendré $ http llamadas a todas mis API. He codificado los datos que devuelve cada una de las llamadas de API para fines de prueba.

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
]

Creé un servicio de borde para llamar a métodos desde mi servicio de API. He usado $ timeout para simular las llamadas async api.

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

En mi EdgeController llamo al servicio y adjunto el valor a $ scope.data

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

debugger.$inject = ["$scope"]

Esta es mi plantilla delgada

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

La salida no está siendo atada ''

¿También es esta la mejor manera de implementar si tengo que hacer múltiples llamadas de API y actualizar la vista a medida que regresa cada una?

Answer 1

$scope.data = EdgeService.tickets()

Debiera ser

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

AngularJS no desenvuelve automáticamente promesas en versiones más nuevas . Esto funcionaría en versiones anteriores de Angular.

Para hacer múltiples llamadas de API dependientes unas de otras, puedes hacer

callA
.then(callB)
.then(callC)

Puede hacer múltiples en paralelo utilizando $ q.all

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