將控制器綁定到ajax承諾服務

Question

我是新來的angularjs。在我的webapp中，我正在嘗試按如下方式與用戶聯繫人合作。

SERVICE

app.service('Contacts', function ($http,$timeout,$q) { 
    return { 
     getData: function() { 
      var defer = $q.defer(); 
      $http.get('../ListContacts') 
      .success(function(data) { 
       defer.resolve(data); 
      }); 
      return defer.promise; 
     } 
    } 
}); 

ContactsController，OtherControllers

$scope.contactsBook = {}; 
... 
Contacts.getData().then(function(data) { 
    $scope.contactsBook = data; 
}); 

我發現SO本身某處上述方法。我使用它，因爲我不想爲聯繫人使用單獨的模塊。

我可以在網頁加載時獲取數據。我可以通過ajax帖子（來自ContactsController）在服務器上更新我的聯繫人。現在我只需要一種方法在所有控制器中自動更新（/刷新）列表。我怎樣才能做到這一點。

我發現thesethreelinks相關但是作爲一個新手我無法找到我的出路。

Answer 1

雖然這是可以理解的，你可能不希望更新您當前的架構，可能需要稍微調整您的來電如果你想能夠通過服務輕鬆地在控制器之間共享數據。

一種靈活的方法是將數據存儲在您的服務中，並在每個控制器中註冊觀察者。這使您可以從一個控制器（聯繫人控制器）調用服務更新，並將更改反映到所有使用控制器中。請注意，該服務被嘲笑。

你可以找到工作plunker示例here。

聯繫服務：

var app = angular.module('app', []);  
app.service('contactsService', function ($http) { 
    var contacts = []; 

    return { 
     loadData: function() { 
      var mockGet = $q.defer(); 

      var data = [ 
       { id: 1, name: 'Jack' }, 
       { id: 2, name: 'Jill' } 
      ]; 

      contacts = data; 
      mockGet.resolve(contacts); 
      return mockGet.promise; 
     }, 
     retrieveNewData: function() { 
      var mockGet = $q.defer(); 

      var data = [ 
       { id: 1, name: 'Jack' }, 
       { id: 2, name: 'Jill' }, 
       { id: 3, name: 'Bob' }, 
       { id: 4, name: 'Susan' } 
      ]; 

      contacts = data; 
      mockGet.resolve(contacts); 
      return mockGet.promise; 
     }, 
     getContacts: function() { 
      return contacts; 
     } 
    } 
}); 

聯繫控制器：

app.controller('ContactsCtrl', ['$scope', 'contactsService', 
    function ($scope, contactsService) { 
    var vm = this; 
    vm.contacts = []; 

    vm.loadData = loadData; 
    vm.retrieveNewData = retrieveNewData; 


    $scope.$watch(angular.bind(contactsService, function() { 
     return contactsService.getContacts(); 
     }), function (newVal) { 
     vm.contacts = newVal; 
    }); 


    function loadData() { 
     contactsService.loadData(); 
    } 

    function retrieveNewData() { 
     contactsService.retrieveNewData(); 
    } 
    } 
]); 

其他控制器：

app.controller('OtherCtrl', ['$scope', 'contactsService', 
    function($scope, contactsService) { 
    var vm = this; 
    vm.contacts = []; 

    $scope.$watch(angular.bind(contactsService, function() { 
     return contactsService.getContacts(); 
     }), function (newVal) { 
     vm.contacts = newVal; 
    }); 
    } 
]); 

Answer 2

你可以做

Contacts.getData().then(function(data) { 
    $scope.contactsBook = data; 
    $scope.$emit('contacts:updated', data); 
}); 

然後，你需要通知有關更新控制器：

$rootScope.$on('contacts:updated', function(e, contacts) { 
    $scope.contacts = contacts; 
}); 

另一種方法

該服務保持電流接觸列表

app.service('Contacts', function ($http,$timeout,$q) { 
    this.currentList = []; 
    this.getData = function() { 
      var defer = $q.defer(); 
      $http.get('../ListContacts') 
      .success(function(data) { 
       defer.resolve(data); 
      }); 
      return defer.promise; 
     } 
}); 

在你的控制器：

Contacts.getData().then(function(data) { 
     $scope.contactsBook = data; 
     Contacts.currentList = data; 
    }); 

在其他控制器：

controller('AnotherController', function($scope, Contacts) { 
    $scope.contacts = Contacts.currentList; 
}); 

Answer 3

如果你要返回一個對象字面，你需要把你的。服務（）成。工廠（）模塊。在這種情況下，我將使用服務模塊。

示例

您的服務。

app.service('Contacts', function ($http,$timeout,$q) { 
    var Contacts = this; 

     contacts.getData = function() { 
      var defer = $q.defer(); 
      $http.get('../ListContacts') 
      .success(function(data) { 
       defer.resolve(data); 
      }); 
      return defer.promise; 
     } 
    } 

return Contacts; 
}); 

然後您需要將此服務器注入到您的ContactsController中。

app.controller('ContactsController', function(Contacts){ 

$scope.data = null; 

$scope.init = function(){ 
Contacts.getData().then(function(response){ 

$scope.data = response; 

}) 
} 

}) 

現在數據可以在DOM使用

例

<li ng-repeat="x in data">{{x.name}}</li>