AngularJS控制器和服务之间的双向数据绑定

Question

我在 angular JS 中有一个服务，定义如下：

'use strict';

angular.module('Offering.AccountService', [])

.service('Account', function($http, config) {

    var account = this;

    account.accountDetails = {};

    this.getAccountDetails = function(){
        var request = $http({
            method: 'GET',
            url: config.accountURL,
            headers: {
                'X-Parse-Application-Id': config.applicationID,
                'X-Parse-REST-API-Key': config.restAPIKey,
            }
        })
        .success(function(data, status, headers, config) {
            console.log('Successfully aqquired account details');
            account.accountDetails = data.results[0];

        })
        .error(function(data, status, headers, config) {
            console.warn(status);
        });
    }


});

此服务调用端点以检索一些数据，我在主模块的运行函数中调用此方法，如下所示：

'use strict';

angular.module('Offering', [
    'routerRoutes'
])

.run(function(Account){
    Account.getAccountDetails();
})

在我的控制器中，我有一个名为 balance 的变量，我想在其中存储从服务中检索到的值，如下面的代码所示：

'use strict';

angular.module('Offering.HomeController', [])

.controller('HomeCtrl', function(Account) {

    this.data = {
        message: "Account Details",
        updateBalance: function() {
            Account.getAccountDetails()
        },
        balance: Account.accountDetails.balance
    }

    // this.$watch(
    //     function () { return Account.accountDetails; },
    //     function (data) {
    //         $scope.data.balance = data.balance
    //     },
    //     true
    // );
})

在设置控制器数据对象后返回来自服务的数据，因此未填充余额字段。如果我使用被注释掉的 $scope.watch 方法，那么数据对象就会被正确填充。但是，我假设不需要这样做，因为服务和控制器之间存在双向数据绑定。任何帮助是极大的赞赏。谢谢！

Answer 1

你不能监视返回 promise 的函数，你最好监视 this.data，他们在控制器中使用这个关键字时监视的方式不同。

代码

$scope.$watch(angular.bind(this, function () {
    return this.data; 
  }), function (newVal, oldVal) {
    // now we will pickup changes to newVal and oldVal
  });

希望对您有所帮助，谢谢。

Answer 2

.run 函数不会停止等待 getAccountDetails 到 return 一个值。因此，当您分配 this.data.balance = Account.accountDetails.balance 时，您实际上是在这样做：this.data.balance = undefined.

根据上面的评论，典型的方法是让 getAccountDetails() 到 return 一个承诺，如下所示：

this.getAccountDetails = function(){
   return $http({...})
       .then(function(response){
          console.log("successfully returned balanace", response.data);
          return response.data;
       });
}

然后，在控制器中：

var vm = this;
Account.getAccountDetails()
  .then(function(accountDetails){
     vm.balance = accountDetails.balance;
  });

AngularJS控制器和服务之间的双向数据绑定

AngularJS Two way data binding between controller and service

angularjs

angular-services