AngularJS:我们如何向不同的控制器广播承诺

Question

我们如何从工厂广播更新的数据。我有两个工厂和两个控制器。

服务1：将数据更新到数据库中

app.factory('uac',function($http,$q, $cookies)
{
   formData.uClient = function(data)
   {
      var client = $http.post('add_client/',data)
      return $q.all({'response':client})
   }
}

服务 2：从数据库获取客户端列表

app.factory('adService',function($http, $q)
{
   clientData = {}
   clientData.getListofClients = function()
   {
       var listOfClients = $http.get('get_clients/')
       return $q.all({'listOfClients':listOfClients})
   }
   return clientData
})

控制器 1：将要更新的数据发送到服务

app.controller('acController', function($scope,uac)
{
    $scope.clientDatadata = {name:"abcd"}
    uac.uClient($scope.clientData)
}

控制器 2：从服务获取客户端数据

app.controller('getDetailsController',function($scope,adService)
{
   adService.getListofClients().then(function(data)
   {
      $scope.clientList = data.listOfClients.data
      console.log($scope.clientList)
   },
   function(error)
   {
      console.log("Can fetch data")
   });
}

首先，我将调用getDetailsController来获取所有客户端，每当通过调用"acController"添加新客户端时，我都希望在"$scope.clientList"中更新客户端列表。我怎样才能完成它？

Answer 1

您可以从发送方控制器$emit事件，并在接收方控制器中侦听它。由于我不确定控制器的层次结构，因此我将$rootScope收听：

控制器 1：将要更新的数据发送到服务

app.controller('acController', function($scope,uac)
{
    $scope.clientDatadata = {name:"abcd"}
    uac.uClient($scope.clientData).then(function(res){
        $scope.$emit('serviceUpdated', res); // you can send data if you wish
    });
}

控制器 2：从服务获取客户端数据

app.controller('getDetailsController',function($scope,adService,$rootScope)
{
   function getList(){
       adService.getListofClients().then(function(data)
       {
           $scope.clientList = data.listOfClients.data
           console.log($scope.clientList)
       },
       function(error)
       {
           console.log("Can fetch data")
       });
    }
    getList();
    $rootScope.$on('serviceUpdated', getList);
}

Answer 2

有三种方法可以做到这一点：

1. （简单）创建一个包含客户端列表的工厂，并直接在您的视图上使用它。

-

myApp.factory('clientList', function () {
    return [];
});

调用控制器 2 以获取客户端列表并保存在出厂时：

app.controller('getDetailsController',function($scope,adService, clientList)
{
   adService.getListofClients().then(function(data)
   {
        clientList = data;
   },
   function(error)
   {
      console.log("Can fetch data");
   });
}

控制器 1：将要更新的数据发送到服务，并将返回的数据保存在 clientList 工厂中

app.controller('acController', function($scope,uac, clientList)
{
    $scope.clientDatadata = {name:"abcd"};
    clientList = uac.uClient($scope.clientData);
}

此解决方案的问题是，在复杂的应用中，您不希望通过工厂公开数据。

2. 在工厂上实现 getter 和 setter，这样您就不会向视图公开数据，而是让控制器控制它们（使用 $watch）。

3. 按照@Shomz答案上的说明使用$emit。但是，我建议在收到排放后提出另一个获取列表请求。我宁愿广播更新的数据（在本例中为发布/更新请求的响应），而不是更新绑定到视图的变量。