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

我会说少即是多 - 如果你可以摆脱代码那么做 - 我建议你在你的控制器中删除它，除非你正在做你没有展示的东西，并把它放在你的指令中，在第一步中：

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

Answer 2

$broadcast和$emit本身并不是不好的做法，但看起来你的应用程序看起来很复杂。

您可以将服务直接添加到指令 - 它们可以在其中内置依赖于服务的控制器。

因此，在您的指令中，添加一个使用seatSelectionService的控制器，类似于：

seatSelectionService.setSeat( scope.seat )

至少会削减其中一个步骤 - 当setSeat方法完成任何聆听时，您的$broadcast方法仍然需要执行defer。

指令可以非常简单或非常复杂 - 它们可以简单地快速输出重复模板，或者带有控制器的动态模板以及对多种服务的访问。

你可能想看的其他东西是 promises - 我曾经使用$ broadcast和$发出比我需要的更多，直到我学会了如何使用promises和{{1}正确的

使用$ emit和$ broadcast不良做法在指令，控制器和服务之间传递数据？

2 个答案: