$emit 或 $broadcast 将事件从控制器发送到指令 AngularJS答案

【问题标题】：$emit or $broadcast an event from a controller to a directive AngularJS$emit 或 $broadcast 将事件从控制器发送到指令 AngularJS
【发布时间】：2014-09-16 20:42:35
【问题描述】：

我希望能够在事件发生时通知指令以更改指令显示的内容。我知道指令只运行一次，所以我想知道我将如何去做。我也不确定我应该使用 $emit 还是 $broadcast，指令是控制器的子指令吗？

例如，在我的控制器中，我有：

$rootScope.$emit('PHOTO_UPLOADED', photo);

在我的指令中：

.directive('photo', [function () {
  return {
    restrict: 'EA',
    scope: {user: '='},
    replace: true,
    template: '<div id="{{user.id}}"></div>',
    link: function ($scope, element, attrs) {
      var thumbnail = ($scope.user && $scope.user.image) 
        ? $scope.user.image
        : '/default.png';

      element.css('background-image', 'url(' + thumbnail + ')');

      $rootScope.$on('PHOTO_UPLOADED', function(event, data) {
         thumbnail = data;
      });
    }
  };
}])

我试图这样做，但什么也没发生，缩略图没有更新，因为指令已经运行。

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案1】：

使用$broadcast。这会将事件广播到子范围。下面是一个使用广播从父控制器向指令发送数据的示例：

http://jsfiddle.net/smaye81/q2hbnL5b/6/

【讨论】：

【解决方案2】：

在你的控制器中做：

$rootScope.$broadcast('PHOTO_UPLOADED', photo);

在你的指令中，通过

捕捉广播事件

  $rootScope.$on('PHOTO_UPLOADED', function(event, data) {
         thumbnail = data;
      });

【讨论】：

【解决方案3】：

您需要确保将$rootScope 传递给您的指令，以便注入：

.directive('photo', ['$rootScope', function($rootScope) {
// snip
}]);

将您的代码的第一行修改为上面的代码，它应该可以正常工作。

【讨论】：