directive to directive communication using broadcast angularjs

Question

I have two directives and need to pass value from one directive after a post request into another directive.

The first directive looks like

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
    }
}

The second directive looks like

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'
    }
});

The second directive event is not listened

So what is the problem or question? Might be a good time to review [ask] — charlietfl, Aug 11 '16 at 00:14
Well there's a syntax error in the second directive (missing closing braces), but maybe you've edited the code incorrectly before posting? Otherwise you'd have an error in the console and the directive wouldn't compile. Have you tried listening on $rootScope? It *should* work on $scope, but I've sometimes had issues with that. — see sharper, Aug 11 '16 at 00:36
sorry i edited it with the bracket. I have but still doesnt work — krs8888, Aug 11 '16 at 00:45
these two controllers aren't even in the same module. they don't share a `$rootScope`. — Claies, Aug 11 '16 at 01:58
either declare both of these controllers in the same module, or create a service to hold the shared data and don't use `$broadcast` at all. — Claies, Aug 11 '16 at 02:11

score 0 · Answer 1 · answered Aug 11 '16 at 01:32

0

For event listening of $scope, you should use $on instead of on

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

answered Aug 11 '16 at 01:32

MMhunter

1,431
1
11
18

Hi did you get an 'vm' undefined error in your first directive's controller? That is not `controllerAs` supposed to be used i think. At least you need `var vm = this` – MMhunter Aug 11 '16 at 01:42
I saw you are putting these two directives in two separate modules. Are you using them in one big module? Like `angular.module("app",["fileUploadDirective","resultPageDirective"])` ? – MMhunter Aug 11 '16 at 01:51

directive to directive communication using broadcast angularjs

1 Answers1