javascript - 兄弟 Controller 可以在没有父级帮助的情况下相互通信吗 - AngularJS

Question

我正在使用 AngularJS 开发一个小应用程序。我的项目包含一个包含 3 个 View 的 Body.html 文件:SideMenu、Header 和 Content，每个 View 都有自己的 Controller 和 MainController parent - Body.html 的 Controller 。
header 的 Controller 能否更改侧边菜单中的属性 - 侧边菜单的打开/关闭状态。 侧边菜单 Controller 能否更改 header 中的属性 - header 的文本。
我可以使用主 Controller ，因为页眉 Controller 和侧边菜单 Controller 都可以引用主 Controller 。但数据不会一致。更新来自第一个 Controller 的数据不会影响第二个 Controller 中的数据(不使用 $watch)。

侧面菜单的 Controller 和标题的 Controller (兄弟 Controller )可以相互通信吗？没有 parent 的帮助？

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 服务在您的 Controller 之间共享一些数据。

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 :fiddle

这个答案涵盖了使用 service 来满足您的需求，但我相信还有其他(也许更好)的方法来解决可能涉及其他 Angular 功能，甚至是一些整体应用程序重构。

要深入挖掘，这个 SO 主题可能是一个好的开始:difference between service, factory and providers