Javascript AngularJs与同级组件通信不工作

我在一个旧项目中工作，在那里我使用AngularJS 1.x，与同级范围通信有困难

App.js

var myApp = angular.module('myApp', ['ui.router', 'headerModule', 'dashboardModule', 'profileData', 'roiData', 'eventData', 'LocalStorageModule']);

// Use Routes to Header Changes
myApp.run( ['$rootScope', '$state', '$stateParams', function ($rootScope,   $state,   $stateParams)  {

    $rootScope.$on('callViewEvent', function(ev, x){
        console.log("here"); //getting printed
        $rootScope.$broadcast('vv',x);
    });

}]);

var eventData = angular.module('eventData', ['angularPayments', 'ngFileUpload']);
eventData.directive('eventData', function () {
  return {
    restrict: 'EA',
    scope: {},
    replace: true,
    link: function ($scope, element, attributes) {

    },
    controller: function ($scope, $attrs, $http, $state, $rootScope, $window, $interval, Auth, Upload) {

       $scope.$on('vv', function(e, x){
           console.log("event called");
           $scope.viewEvent(x);
       });

    },
    templateUrl: 'directives/event/eventData.tpl.html'
  }
});

var dashboardModule = angular.module('dashboardModule', []);
dashboardModule.controller('dashboardController', function($scope, $rootScope, $http, Auth, $state ) {
    $scope.childmethod = function(x) {
        console.log("click"+x);
        $scope.$emit("callViewEvent", x);
    }
});

我有指示

eventData.js

var myApp = angular.module('myApp', ['ui.router', 'headerModule', 'dashboardModule', 'profileData', 'roiData', 'eventData', 'LocalStorageModule']);

// Use Routes to Header Changes
myApp.run( ['$rootScope', '$state', '$stateParams', function ($rootScope,   $state,   $stateParams)  {

    $rootScope.$on('callViewEvent', function(ev, x){
        console.log("here"); //getting printed
        $rootScope.$broadcast('vv',x);
    });

}]);

var eventData = angular.module('eventData', ['angularPayments', 'ngFileUpload']);
eventData.directive('eventData', function () {
  return {
    restrict: 'EA',
    scope: {},
    replace: true,
    link: function ($scope, element, attributes) {

    },
    controller: function ($scope, $attrs, $http, $state, $rootScope, $window, $interval, Auth, Upload) {

       $scope.$on('vv', function(e, x){
           console.log("event called");
           $scope.viewEvent(x);
       });

    },
    templateUrl: 'directives/event/eventData.tpl.html'
  }
});

var dashboardModule = angular.module('dashboardModule', []);
dashboardModule.controller('dashboardController', function($scope, $rootScope, $http, Auth, $state ) {
    $scope.childmethod = function(x) {
        console.log("click"+x);
        $scope.$emit("callViewEvent", x);
    }
});

控制器模块

dashboardController.js

var myApp = angular.module('myApp', ['ui.router', 'headerModule', 'dashboardModule', 'profileData', 'roiData', 'eventData', 'LocalStorageModule']);

// Use Routes to Header Changes
myApp.run( ['$rootScope', '$state', '$stateParams', function ($rootScope,   $state,   $stateParams)  {

    $rootScope.$on('callViewEvent', function(ev, x){
        console.log("here"); //getting printed
        $rootScope.$broadcast('vv',x);
    });

}]);

var eventData = angular.module('eventData', ['angularPayments', 'ngFileUpload']);
eventData.directive('eventData', function () {
  return {
    restrict: 'EA',
    scope: {},
    replace: true,
    link: function ($scope, element, attributes) {

    },
    controller: function ($scope, $attrs, $http, $state, $rootScope, $window, $interval, Auth, Upload) {

       $scope.$on('vv', function(e, x){
           console.log("event called");
           $scope.viewEvent(x);
       });

    },
    templateUrl: 'directives/event/eventData.tpl.html'
  }
});

var dashboardModule = angular.module('dashboardModule', []);
dashboardModule.controller('dashboardController', function($scope, $rootScope, $http, Auth, $state ) {
    $scope.childmethod = function(x) {
        console.log("click"+x);
        $scope.$emit("callViewEvent", x);
    }
});

我将事件从一个孩子发送给另一个孩子，然后将其播送到另一个孩子。发射工作，但广播不工作。这是第二个事件呼叫正在工作

请尝试：

    $rootScope.$on('vv', function(e, x){
       console.log("event called");
       $scope.viewEvent(x);
    });

---

侦听事件的组件要么未实例化，要么在调度事件后实例化

出于调试目的，向组件添加

console.log

：

app.directive('eventData', function () {
  return {
    restrict: 'EA',
    scope: {},
    replace: true,
    link: function ($scope, element, attributes) {

    },
    controller: function ($scope, $attrs, $http, $state, $rootScope, $window, $interval, Auth, Upload) {

       //DEBUG TIMING
       console.log("eventData controller instantiated");

       $scope.$on('vv', function(e, x){
           console.log("event called");
           $scope.viewEvent(x);
       });

    },
    templateUrl: 'directives/event/eventData.tpl.html'
  }
});

请注意，$scope事件总线已被弃用。使用它将使迁移到Angular 2+更加困难

有关详细信息，请参阅

---

所以你从来没有看到过“事件调用”，但你确实看到了“此处”？是的，没错，我尝试过，但没有效果名为“is not seenit”的事件与未实例化的子级有关您能看到屏幕上呈现的指令吗？否。因此，当我实际单击调用指令的按钮并返回仪表板并重试时，我可以看到正在呈现的指令。但是如果我刷新并再次点击dashobard，那么responesHmm，似乎您需要处理这个问题，因为非实例化指令当然不能接收事件！如果你被卡住了，也许可以发布一个新问题。