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雙向數據控制器和服務之間的結合

回答

相關問題