Can Siblings Controllers взаимодействуют друг с другом без помощи родителя - AngularJS

Question

Я работаю над небольшим приложением в AngularJS. Мой проект содержит файл Body.html, которые содержат 3 вида: SideMenu, Заголовок и Содержимое, каждый с каждым собственным контроллером и MainController как есть родитель - контроллер в Body.html.
Может ли контроллер заголовка изменить свойство в боковом меню - статус открытия/закрытия бокового меню. И может ли контроллер бокового меню изменять свойство в заголовке - текст заголовка.
Я могу использовать главный контроллер, поскольку как контроллер заголовка, так и контроллер бокового меню могут ссылаться на главный контроллер. Но данные не будут состоять. Обновление данных с 1-го контроллера не влияет на данные во втором контроллере (без использования $ watch).

Могут ли как контроллер бокового меню, так и контроллер заголовка (диспетчер сиблинга) взаимодействовать друг с другом? без помощи родителя?

Body.html

<div> 
    <!-- Header placeholder --> 
    <div ui-view="header"></div> 

    <!-- SideMenu placeholder --> 
    <div ui-view="sideMenu"></div> 

    <!-- Content placeholder --> 
    <div ui-view></div> 
</div> 

header.html

<div> 
    {{ headerCtrl.text }} 
</div> 
<div ng-click="headerCtrl.openSideMenu()"> 
    --Open-- 
</div> 

HeaderController.js

// sideMenuCtrl = ??? 
headerCtrl.text = "Title"; 
headerCtrl.openSideMenu = function() 
{ 
    sideMenuCtrl.isSideMenuOpen = true; 
}; 

SideMenu.html

<div ng-class={ 'side-menu-open': sideMenuCtrl.isSideMenuOpen }> 

    <div ng-repeat="menuItem in sideMenuCtrl.sideMenuItems" 
      ng-click="sideMenuCtrl.selectMenuItem(menuItem)"> 
      {{ menuItem.text }} 
    </div> 
</div> 

SideMenuController.js

// headerCtrl = ??? 
sideMenuCtrl.selectMenuItem = function(menuItem) 
{ 
    headerCtrl.text = menuItem.text; 
} 

Answer 1

Как указано в моем комментарии, вы можете использовать услугу AngularJS поделиться некоторыми данными между контроллерами.

app.service('AppContextService', function(){ 
    this.context = { 
     isSideMenuOpen: false 
    }; 
}); 

app.controller('SideMenuCtrl', ['$scope', 'AppContextService', function($scope, AppContextService) { 
    // exposing the application context object to the controller. 
    $scope.appContext = AppContextService.context; 
}]); 

app.controller('HeaderCtrl', ['$scope', 'AppContextService', function($scope, AppContextService) { 
    $scope.appContext = AppContextService.context; 
    $scope.openSideMenu = function() 
    { 
     $scope.appContext.isSideMenuOpen = true; 
    }; 
}]); 

Затем адаптируйте HTML для использования вашего общего объекта appContext.

<div ng-class={ 'side-menu-open': appContext.isSideMenuOpen }> 
    [...] 
</div> 

Вот рабочая скрипку, которая иллюстрирует проблему: fiddle

Этот ответ охватывает использование service, чтобы соответствовать вашим потребностям, но я уверен, что есть и другие (и, возможно, лучше) способов решения проблема, которая может включать в себя другие функции Angular, или даже некоторые общие рефакторинг приложений.

копнуть немного глубже, это ТАК тема может быть хорошим началом: difference between service, factory and providers