Question

我有两个独立的DOM部分，我想显示相同的数据。例如：新消息的数量。但是我不想为每个控制器调用服务（ajax请求）。

最初我在2个不同的包含垃圾邮件中使用了相同的控制器（ng-controller =＆＃34; totalMessages＆＃34;）并且工作正常，但是控制台显示了两次调用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>

视图的一个例子。

如何在不制作多个ajax请求的情况下实现此目标？

ps.我是angularjs的新手。

Answer 1

选项1 - 使用ng提供的$cacheFactory缓存值。但是这些并不能提供对数据如何被检索的任何控制。您必须首先实现自己的逻辑来查找缓存中的数据，如果不存在则发出ajax请求。
选项2 - 在$http中启用缓存。这仍然提供了对底层缓存机制的较少控制。如果必须仅为特定请求启用缓存，那么这将需要一些额外的逻辑
选项3 - 使用自定义服务获取数据，如下面的示例所示。虽然这看起来像额外的逻辑，但它将为您提供对消息的更多控制。例如，如果您想在一小时后刷新消息，您可以简单地包括修改日期并设置超时以检查上次刷新时间是否大于一小时并刷新消息。

var app = angular.module（＆＃39; plunker＆＃39;，[]）;

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();
});

Sample plunker：http://plnkr.co/edit/qIVOcaIYkbMCzEYpoWnR?p=preview

Answer 2

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

angularjs复制控制器/在多个位置显示相同的数据

2 个答案: