Question

我是Angularjs的新手。我对控制器的设计和数据共享有疑问。

我有第一个部分upload.html使用UploadCntrl使用$http.post将word文档上传到服务器。服务器调用封装在uploadService中。在服务器端，我会调整文档中单词列表出现的频率，并将该信息作为对$http.post的响应返回。

回到UploadCntrl，成功后，我想指示/显示第二个部分report.html，它使用AnalyseCntrl来显示分析的响应（上面提到的$http.post）表格形式。

如何与UploadCntrl一起分享AnalyseCntrl中的分析响应？

这是设计控制器的正确方法吗？

Answer 1

执行此操作的方法是创建服务并将其注入两个控制器。

app.service("sharedService", function () {
    return {
        sharedObject: {data: null}
    };
});

现在在每个控制器中，像这样：

app.controller("myController", ["$scope", "$http", "$filter", "storageService",   function($scope, $http, $filter, storageService) {

    // We don't need to put it on the $scope but it makes it available to the view
    $scope.shared = storageService.sharedObject;
    ...
    // After the following line, the other controller will have access to 
    // storageService.sharedObject.myThing as well. Easy!
    $scope.shared.myThing = "your thing";
    ...

Answer 2

最好通过services或factories在AngularJS中共享数据。另一种选择是将响应存储在浏览器的local storage内，然后在AnalyseCntrl内访问它。

所以，在UploadCntrl：

中有类似内容

anaylseAPI.sendToAnalyse(object).then( function (response) {
 localStorage.setItem("howMany", response.amount);
});

然后访问localStorage内的AnaylseCntrl。

另一种解决方案是使用服务。

它们的行为类似于单身人士，因此您可以将它们用作数据存储。

angular
  .module( 'app', [])
  .service('DataStore', DataStore);

function DataStore() {

  this.amount = 0;

  return function(amountOf) {
    this.amount = amountOf;
  };
}

现在inject两个控制器中的服务，并保存/获取数据。

Answer 3

您可以编写一个负责发送您的帖子请求的angularjs服务。在此服务中，您可以使用变量存储响应，并提供getter方法来检索此变量的值。

此外，您可能希望提供一个功能，将您的文件作为参数并发出$http请求。只要收到服务器的响应，就会将响应值分配给变量并发送广播。

广播可以是这样的

$rootScope.$broadcast('response-recieved');

您需要做的是在两个控制器中注入此服务，收听广播事件，然后调用服务的get方法来检索响应。

你可以这样做：

$scope.$on('response-recieved', function() {
    var myResponse = MyService.getResponse();
}

Here您可以找到如何使用服务的示例。如果这有助于你，请告诉我。

Angular js控制器设计将http post响应的数据传递给另一个控制器

3 个答案: