使用广播 angularjs 指示通信的指令答案

【问题标题】：directive to directive communication using broadcast angularjs使用广播 angularjs 指示通信的指令
【发布时间】：2016-12-17 12:35:27
【问题描述】：

我有两个指令，需要在发布请求后将值从一个指令传递到另一个指令。

第一个指令看起来像

var fileUpload = angular.module('fileUploadDirective',[]);
fileUpload.directive('fileUpload', function () {
        return {
            restrict: 'EA',
            templateUrl: 'app/views/fileUpload/file-upload.tpl.html',
            controller: fileUploadCtrl
        }
    });
fileUploadCtrl.$inject = ['$scope', '$rootScope', '$http','FileUploader'];
function fileUploadCtrl($scope, $rootScope, $http, FileUploader) {

    var vm =this
    vm.uploader.onBeforeUploadItem = function (item) {            
        $rootScope.$broadcast("NEW_EVENT",data); //send event
    }
}

第二个指令看起来像

var resultPage = angular.module('resultPageDirective',[]);
resultPage.directive('resultDirective',function(){
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        link: function($scope, element, attributes){
        },
        controller: function($scope,$rootScope,$attrs,$http){    
            $scope.junkFiles = ["abc","xyz"];
            $scope.$on("NEW_EVENT",function(event,data){ //listen to event
                   console.log(data);
            });

        },
        templateUrl: 'app/views/resultPage/resultPage.tpl.html'
    }
});

不监听第二个指令事件

【问题讨论】：

那么问题或疑问是什么？可能是回顾How to Ask的好时机
第二个指令事件不起作用。听不懂
第二个指令中存在语法错误（缺少右括号），但也许您在发布之前错误地编辑了代码？否则，您将在控制台中出现错误，并且该指令将无法编译。你试过听 $rootScope 吗？它应该在 $scope 上工作，但我有时会遇到问题。
对不起，我用括号编辑了它。我有，但还是不行
这两个控制器甚至不在同一个模块中。他们不共享$rootScope。

标签： angularjs angularjs-directive angular-directive angularjs-events

【解决方案1】：

对于$scope的事件监听，你应该使用$on而不是on

$scope.$on("NEW_EVENT",function(event,data){ //listen to event
       console.log(data);
});

【讨论】：

您好，您在第一个指令的控制器中是否收到“vm”未定义错误？我认为这不是应该使用的controllerAs。至少你需要var vm = this
我看到您将这两个指令放在两个单独的模块中。您是否在一个大模块中使用它们？喜欢angular.module("app",["fileUploadDirective","resultPageDirective"])？