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


});

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

'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

你不能把手表放在返回承诺的功能上，更好的是你可以把手表放在this.data上，在控制器内使用这个关键字时，它们是不同的看守方式。

<强> CODE

$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返回值。因此，当您指定this.data.balance = Account.accountDetails.balance时，您实际上是这样做的：this.data.balance = undefined。

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

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控制器和服务之间的双向数据绑定

2 个答案: