【问题标题】:Angular Js data sharing between controller控制器之间的Angular Js数据共享
【发布时间】:2016-07-14 13:13:34
【问题描述】:

我有两个并行控制器 headerCtrl 和 cartCtrl 。当我从 cartCtrl 添加产品时,我想反映 headerCtrl 的计数增加。实现这一目标的最佳方法是什么?

我知道使用共享服务我们可以做到这一点:添加产品时更新服务计数。但是如何更新 headerCtrl 中的计数?

还有没有其他最好的方法来实现这一点?

【问题讨论】:

标签: angularjs controller


【解决方案1】:

通常我会使用服务在控制器之间共享数据。因此,您可以创建如下所示的服务并从两个控制器访问/修改它。要通知其他组件,您可以使用 $rootScope.$emit 来传递数据。如果您不需要将事件传播到所有子范围,这通常比 $broadcast 更有效。这是一种快速的方法 - 但是您可能很快就会遇到每个组件都依赖于 $rootScope 的情况,另一种方法是通过服务设置侦听器:Why do we use $rootScope.$broadcast in AngularJS?

angular.module('app').service('myService', function($rootScope) {
 var count = 0;

 this.increaseCount = function() {
     count++;
     $rootScope.$emit('countUpdated', count);
 }

 this.getCount = function () {
     return count;
 }
});

angular.module('app').controller('HeaderCtrl', ['$rootScope', function($rootScope) {

  $rootScope.$on('countUpdated', function(count) {
    // do your stuff
  });
}])

【讨论】:

  • 如何从 HeaderCtrl 调用 getCount() ?我需要刷新它吗?
  • 是的,我可以注入它并调用 myService.getCount() 。但是当在 cartCtrl 中添加产品时,我需要在 headerCtrl 中调用此函数。那么我将如何触发呼叫?
  • emit 在并行控制器的情况下会起作用,因为我认为它只会向父控制器发出?
  • 我已经更新了答案中的代码——如果你在 $rootScope 上 $emit 事件,你可以通过在 $rootScope 上添加一个监听器来捕获它。如果您不需要将事件传播到所有子范围,这通常比 $broadcast 更好
【解决方案2】:

我想这里有两个问题需要解决 1. 一是数据共享:这可以通过服务来实现 2.另一个是在目标控制器自动更新,即不调用get。为此使用角度broadcast

【讨论】:

  • 广播将与并行控制器一起使用,因为我认为广播仅将事件触发到子控制器?
  • 我猜应该没关系。广播是有角度的 pub-sub 方式
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-12-15
  • 2014-03-22
  • 1970-01-01
  • 1970-01-01
  • 2013-08-14
  • 2013-05-28
相关资源
最近更新 更多