I am currently developing a small AngularJS app. Within my project, I have a Body.html file that consists of 3 views: SideMenu, Header, and Content. Each view has its own Controller, with a MainController serving as their parent - the controller for the Body.html.
Is it possible for the header's controller to modify a property in the side-menu, such as toggling the open/close status of the side-menu? Likewise, can the side-menu controller update a property in the header, like changing the text displayed in the header?
I could leverage the main controller as both the header's controller and the side-menu controller can access it. However, this approach may lead to inconsistent data. Changes made in one controller might not reflect in the other (without using $watch).
Can the side-menu controller and the header's controller (siblings) communicate with each other directly, without involving their parent controllers?
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;
}