Ajax angularjs复制控制器/在多个点显示相同数据_Ajax_Angularjs

Ajax angularjs复制控制器/在多个点显示相同数据

ajax angularjs

Ajax angularjs复制控制器/在多个点显示相同数据,ajax,angularjs,Ajax,Angularjs,我有两个单独的DOM部分，我想显示相同的数据。新邮件的计数。但是，我不想为每个控制器调用服务（ajax请求）最初，我在两个不同的包含垃圾邮件的系统中使用了相同的控制器（ng controller=“totalMessages”），这很有效，但控制台显示ajax请求被调用了两次 <body ng-app="myApp"> ...... <div ng-controller="totalMessages"> <span ng-bind="total

我有两个单独的DOM部分，我想显示相同的数据。新邮件的计数。但是，我不想为每个控制器调用服务（ajax请求）

最初，我在两个不同的包含垃圾邮件的系统中使用了相同的控制器（ng controller=“totalMessages”），这很有效，但控制台显示ajax请求被调用了两次

<body ng-app="myApp">
   ......
   <div ng-controller="totalMessages">
    <span ng-bind="totalMsg">0</span>
   </div>
   ......
   <div ng-controller="totalMessages">
    There are <span ng-bind="totalMsg">0</span> new messages.
   </div>
   ......
</body>


......
0
......
有0条新消息。
......

视图的一个示例

如何在不发出多个ajax请求的情况下最好地实现这一点

另外，我是angularjs的新手。

一个选项是一个底层Angular服务，它将隐藏对实际web/REST服务的调用。Angular服务还将处理数据缓存，因此即使两个控制器都将调用它，实际的远程调用也只会发生一次。让Angular服务的方法返回一个承诺，该承诺将通过远程调用的数据或缓存的数据得到解决

选项1-使用ng提供的缓存值。但这些并不能控制如何检索数据。您必须首先实现自己的逻辑来查找缓存中的数据，如果不存在，则发出ajax请求

选项2-在中启用缓存。尽管如此，对底层缓存机制的控制还是比较少。如果必须仅为特定请求启用缓存，则这将需要一些额外的逻辑

选项3-使用自定义服务获取数据，如下面的示例所示。虽然这看起来像是额外的一点逻辑，但它将为您提供对消息的更多控制。例如，如果要在一小时后刷新消息，可以简单地包括修改的日期并设置超时，以检查上次刷新的时间是否大于一小时，然后刷新消息 var app=angular.module（'plunker'，[]）

样品：谢谢。我曾经考虑过缓存，但不确定它将如何工作，因为这个控制器最终需要重复（每30秒）以检查新消息。该服务可以实现缓存和超时策略，再次对其消费者隐藏该细节。因此，在这种情况下，控制器会尽可能频繁地重复对Angular service的调用；服务决定其缓存在每个给定时间是否有效，以便返回它（缓存）或调用远程服务。

app.service('msgService',function(){
  var message = 0, msgLoaded = false;
  this.getMsg = function(){
    if(!msgLoaded){
      //include the ajax request to get the message here.
      message++;
      msgLoaded = true;
    }
    return message;
  }
});

app.controller('MainCtrl', function($scope, msgService) {
  $scope.name = 'World';
  $scope.message = msgService.getMsg();
});