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( .... )