AngularJS双向数据控制器和服务之间的结合

我有角JS一个服务，其被定义为如下：AngularJS双向数据控制器和服务之间的结合

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

在我的控制器，我有一个所谓的平衡变量，其中我要存储从服务中检索到的值，如在下面的代码如：

'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方法，那么数据对象会正确填充。但是，我假设不需要这样做，因为服务和控制器之间存在双向数据绑定。任何帮助是极大的赞赏。谢谢！

来源

2015-02-23 kushaldsouza

这通常是通过返回处理当承诺得到解决时，承诺从您的服务中设置数据并将其设置在您的控制器中。 – Bert 2015-02-23 18:39:34

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

来源

2015-02-23 18:46:37

谢谢你的回应。我不想在控制器中执行此操作，因为我想使用多个控制器中返回的数据。在设置任何控制器之前，有什么办法可以做到这一点，以便我不必在每个控制器中都这样做？ – kushaldsouza 2015-02-24 11:27:06

如果您填充（而不是覆盖）最初为空的'accountDetails'对象，那么您可以'观察'它进行更改。但是，这不是有效的，因为它将在每个摘要中完成。另一种方法是使用'$ routeProvider'的'resolve'属性或更强大的'$ stateProvider' - 这允许您在导航到View之前解析所有的异步依赖关系，并将它们注入到所有依赖控制器。 – 2015-02-25 03:05:20

谢谢，这似乎是我正在寻找。 – kushaldsouza 2015-02-25 09:28:51

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

CODE

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

希望这可以帮助你，谢谢。

来源

2015-02-23 18:44:12

AngularJS双向数据控制器和服务之间的结合

回答

相关问题