AngularJs связь с компонентом брата не работает

Question

Я работаю над старым проектом, в котором я использую AngularJS 1.x, и у меня возникают проблемы при установлении связи с областью брата

Приложение. 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);
    });

}]);

У меня есть директива

eventData. js

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

Модуль контроллера

dashboardController. js

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

Я передаю событие от ребенка к родителю, а затем транслирую в другого ребенка. Эмит работает, но трансляция не работает. То есть второе событие вызова работает

Answer 1

Компонент, который прослушивает событие, либо не создается, либо создается после того, как событие отправлено.

В целях отладки добавьте 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+.

Для получения дополнительной информации см.

• AngularJS Руководство разработчика - компонентное приложение Архитектура

Answer 2

Пожалуйста, попробуйте:

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