Angularjs UI是否不会使用由Promise更新的服务绑定进行更新？

Question

我花了一整夜试图解决这个问题，最终决定放弃并寻求帮助。

我正在使用AngularJS构建一个Web应用程序，该应用程序旨在与Flakey连接（移动设备）一起使用。

我正在尝试为用户实现向服务器添加对象（无论是约会，书本还是无关紧要）的功能。

处理与服务器同步对象的服务：

angular.module('App')
  .service('syncUp', function syncUp($http, $q, app) {

    this.addObject = function addObject(object) {
      var deferred = $q.defer();
      app.inSync = false;

      var httpConfig = {
        method: 'POST',
        url: 'http://myurl.dev/app_dev.php/api/add-object',
        data: object
      }

      function persist() { setTimeout(function() {
          $http(httpConfig).
              success(function(data, status) {
                  app.inSync = true;
                  deferred.resolve(data.id);
              }).
              error(function(data, status) {
                  app.inSync = false;
                  persist();
              });
      }, 3000);
      };

      persist();

      return deferred.promise;
    }
  });

状态栏绑定到的“应用”服务：

'use strict';

angular.module('App')
  .service('app', function app($http, $q) {
    this.inSync = true;
  });

模板绑定到“ app”服务的inSync属性：

<div class="status" ng-class="{'insync':inSync}"></div>

将数据从控制器发送到syncUp服务的特定对象服务：

this.addBook = function(book)
      {
        var tempId = syncUp.generateUid();
        this.books[tempId] = book;
        this.books[tempId].tempId = tempId;
        syncUp.addObject({
          'type': 'book',
          'data': this.books[tempId]
        }).then(function(newId) {
            booksRef[newId] = book;
            delete booksRef[tempId];
          }, function() {});
      }

一切都按预期进行（数据被持久化到服务器上并且ID被返回并替换tempId很好。问题是，当更新“ app”服务上的inSync键时，未添加该类/从div中移除，因为它应该与ng-class在模板中相同。如果我加载另一条路线，则将强制迭代所有内部循环角度所做的事情，并在模板上更新该类。

我尝试了各种方式的$ apply（）解决方案，将app.inSync键设置为true的位置，循环了一个函数查看它。 它被设置在所有正确的位置（通过调试，我知道它已正确设置为true），我只是不知道如何使更改出现在UI上。

我尝试过：$ rootScope。$ apply（function（）{app.inSync = true;}）;

这给了我一个错误（已在运行摘要，或其他）。

因此，我尝试了已在许多答案/博客上发布的“ safeApply”版本，该版本没有引发错误，但也没有起作用。

据我所知，应该在解决诺言时更新UI（http和syncUp.addObject诺言都得到解决，所以我不确定为什么它不起作用。

有任何想法吗？ 我需要保留promises的当前实现，以便能够在添加的对象上设置从服务器返回的ID，以避免syncUp和对象角度服务之间的循环依赖问题。

编辑：

和状态栏指令：

angular.module('App')
  .directive('navigation', function (app) {
    return {
      templateUrl: '/app/views/navigation.html',
      restrict: 'E',
      link: function (scope, element, attrs) {
          scope.inSync = app.inSync;
      }
    }
  });

Answer 1

您在模板中进行的引用引用了当前$scope上的对象。 服务通常不会在$scope创建或添加任何内容，因此将属性放在服务上不会使它们可用于模板。 要在$scope上获取内容，您需要使用控制器。 您可以使用ng-controller指令来引用控制器，您将在第一个AngularJS教程中找到相关示例。

您应该做的是创建一个控制器，并使其监听服务中的事件。 这是如何执行此操作的示例 。

那是好方法； 您也可以通过将inSync = true放在$rootScope上来摆脱它。

service('syncUp', function syncUp($http, $q, app, $rootScope) {
    // (...)
    $rootScope.inSync = true;

Answer 2

您似乎希望看到服务（'app'）和模板之间的绑定正在运行。 很难说我们是否没有看到整个图片。 继续该假设，您需要重构，以便在控制器上设置绑定。

我希望控制器设置看起来像这样：

angular.module('App')
.controller('app', function app($http, $q, $scope) {
    $scope.inSync = true;
});

现在，您将在“ inSync”属性上建立了双向绑定。

否则，您的模板看起来不错。

如果我不在基地，请在更多情况下更新您的问题，或者更好地进行提拔以解决问题。