使用 $emit 和 $broadcast 在指令、控制器和服务之间传递数据是不好的做法吗？

Question

您好，我是 Angular 开发新手，我想知道我在控制器之间传递数据的方式是否是不好的做法。

我正在创建一个座位图小部件，您可以通过该小部件单击一个座位，它会使用不同的控制器在应用程序的另一部分显示数据。

1) 我有一个包含动态模板的指令。根据传递的模型（来自 ng-repeat），它将创建一个事件监听器，如下所示：

if(scope.seat.isAvailable) {
  element.bind('click', function() {
    scope.$emit('clickedSeat', scope.seat);
  }
  element.append(seatAvailableTemplate);
}

2) 在我的控制器中，我有以下监听点击：

$scope.$on('clickedSeat', function(event, seat) {
  seatSelectionService.broadcastSeatData(seat);
}

3) 我有一个 服务，我在其中传入了 $rootScope，它允许我将数据广播到不同的控制器：

var seatSelectionService = {};
seatSelectionService.broadcastSeatData = function(clickedSeat) {
  seatSelectionService.seatData = clickedSeat;
  $rootScope.$broadcast('seatSelected');
}
return seatSelectionService;

4) 在其他控制器中，我有一个监听器，它设置 $scope 属性，在视图中呈现 {{selectedSeat}}：

$scope.$on('seatSelected', function() {
  $scope.selectedSeat = seatSelectionService.seatData;
  $scope.apply();
} 

当然，我必须将 seatSelectionService 传入两个控制器才能正常工作。

有没有更好的方法来做到这一点？或者这种传递数据的方式是有效的做法吗？

Answer 1

$broadcast 和 $emit 本身并不是坏习惯，但看起来你的应用程序确实过于复杂了。

您可以将 services 直接添加到 directives - 它们可以内置依赖于服务的控制器。

所以在你的指令中，添加一个使用 seatSelectionService 的控制器，类似于：

seatSelectionService.setSeat( scope.seat )

这至少省去了其中一个步骤 - 您的 setSeat 方法在完成任何侦听后仍会执行 $broadcast。

指令可以很简单也可以很复杂——它们可以是一种快速输出重复模板的方法，也可以是带有控制器和访问多个服务的动态模板。

您可能还想看看 promises - 我过去经常使用 $broadcast 和 $emit，直到我学会了如何正确使用 promises 和 defer

Answer 2

我想说少即是多-如果您可以摆脱代码执行-我建议您在控制器中删除它，除非您正在执行您未显示的操作，并将其放入您的指令中，在第一步：

$scope.$on('clickedSeat', function(event, seat) {
  seatSelectionService.broadcastSeatData(seat);
}