Данные не обновляются в представлении после разрешения обещания

Я использую свое приложение Rails в качестве серверной части API. Итак, у меня есть одностраничное угловое приложение, которое будет делать несколько вызовов API и начинать отображать по мере возврата каждых данных. Я не хочу ждать всех результатов от вызова API, а затем загружать данные, поэтому я начал изучать deferred и promise.

У меня есть служба angular под названием api, где у меня будут вызовы $http для всех моих API. Я жестко запрограммировал данные, возвращаемые каждым из вызовов API, для целей тестирования.

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.

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

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 и обновлять представление по мере возврата каждого из них?


person yesh    schedule 09.12.2013    source источник
comment
Я рекомендую предоставить примеры в JS и/или plnkr или fiddle :)   -  person Kenneth Lynne    schedule 10.12.2013


Ответы (1)


$scope.data = EdgeService.tickets()

Должно быть

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

AngularJS не разворачивает обещания автоматически в новых версиях . Это будет работать в более старых версиях Angular.

Чтобы сделать несколько вызовов API, зависящих друг от друга, вы можете сделать

callA
.then(callB)
.then(callC)

Вы можете делать несколько параллельно, используя $q.all

$q.all([callA, callB, callC]).then( .... )
person Kenneth Lynne    schedule 09.12.2013
comment
Большое спасибо !! Также я планирую сделать данные массивом и помещать значения в массив после каждого вызова. Это лучший способ? - person yesh; 10.12.2013
comment
Мои вызовы API не зависят друг от друга. $q.all будет ждать, пока все вызовы API вернут обещание, а затем что-то сделает. Но я хочу обновить свое мнение, когда получу результаты. Один из моих вызовов API занимает 1 минуту, поэтому я не могу так долго ждать, чтобы показать другие значения. - person yesh; 10.12.2013