I have two parallel controllers headerCtrl and cartCtrl . when I add a product from cartCtrl I want to reflect the count increase in headerCtrl . What is the best way to achieve this ?
我有两个并行控制器headerCtrl和cartCtrl。当我从cartCtrl添加产品时，我想反映headerCtrl中的计数增加。实现这一目标的最佳方法是什么？
I know Using shared services we can achieve this : when a product got added update the count in service . but how can I update the count in headerCtrl ?
我知道使用共享服务我们可以实现这一点：当添加产品时更新服务中的计数。但是如何更新headerCtrl中的计数？
Also if there is any other best approach to achieve this ?
如果有任何其他最佳方法来实现这一目标？
2 个解决方案
#1
3
Usually I'd use service to share data between controllers. So you create a service like below and access/modify it from both controllers. To notify other components, you can use $rootScope.$emit to pass the data. This is usually more efficient than $broadcast if you don't need to propagate event to all child scopes. This is a quick way to do it - however you may quickly end up in a situation where every component depends on $rootScope, an alternative is set up listeners through a service: Why do we use $rootScope.$broadcast in AngularJS?
通常我会使用服务在控制器之间共享数据。因此，您创建如下所示的服务，并从两个控制器访问/修改它。要通知其他组件，可以使用$ rootScope。$ emit来传递数据。如果您不需要将事件传播到所有子范围，这通常比$ broadcast更有效。这是一种快速的方法 - 但是你很快就会遇到每个组件都依赖于$ rootScope的情况，另一种方法是通过服务设置监听器：为什么我们在AngularJS中使用$ rootScope。$ broadcast？
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
});
}])
#2
1
I guess there are two issues to be tackled here 1. One is share of data : this can be achieved by having a service 2. Another is automatic update at destination controller i.e without calling get. For this use angular broadcast
我想这里要解决两个问题1.一个是数据共享：这可以通过提供服务来实现2.另一个是目标控制器的自动更新，即不调用get。为此使用角广播
#1
3
Usually I'd use service to share data between controllers. So you create a service like below and access/modify it from both controllers. To notify other components, you can use $rootScope.$emit to pass the data. This is usually more efficient than $broadcast if you don't need to propagate event to all child scopes. This is a quick way to do it - however you may quickly end up in a situation where every component depends on $rootScope, an alternative is set up listeners through a service: Why do we use $rootScope.$broadcast in AngularJS?
通常我会使用服务在控制器之间共享数据。因此，您创建如下所示的服务，并从两个控制器访问/修改它。要通知其他组件，可以使用$ rootScope。$ emit来传递数据。如果您不需要将事件传播到所有子范围，这通常比$ broadcast更有效。这是一种快速的方法 - 但是你很快就会遇到每个组件都依赖于$ rootScope的情况，另一种方法是通过服务设置监听器：为什么我们在AngularJS中使用$ rootScope。$ broadcast？
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
});
}])
#2
1
I guess there are two issues to be tackled here 1. One is share of data : this can be achieved by having a service 2. Another is automatic update at destination controller i.e without calling get. For this use angular broadcast
我想这里要解决两个问题1.一个是数据共享：这可以通过提供服务来实现2.另一个是目标控制器的自动更新，即不调用get。为此使用角广播