控制器之间的Angular Js数据共享

时间:2016-07-14 13:13:35

标签: angularjs controller

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

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

此外,如果还有其他最佳方法可以实现这一目标吗?

2 个答案:

答案 0 :(得分:3)

通常我会使用服务在控制器之间共享数据。因此,您创建如下所示的服务,并从两个控制器访问/修改它。要通知其他组件,可以使用$ 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
  });
}])

答案 1 :(得分:1)

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