兄弟姐妹控制器可以在没有父级帮助的情况下相互通信 - AngularJS

Can Siblings Controllers communicate with each other without the help of the Parent - AngularJS

本文关键字：情况下 互通 通信 AngularJS 帮助 控制器 兄弟姐妹      更新时间：2023-09-26

我正在开发一个AngularJS的小应用程序。我的项目包含一个 Body.html 文件，其中包含 3 个视图：侧菜单、标题和内容，每个视图都有自己的控制器和一个主控制器作为父控制器 - Body.html 的控制器。
标头的控制器可以更改侧菜单中的属性 - 侧菜单的打开/关闭状态。侧菜单控制器可以更改标题中的属性 - 标题的文本。
我可以使用主控制器，因为标头的控制器和侧菜单控制器都可以引用主控制器。但数据不会是一致的。从第一个控制器更新数据不会影响第二个控制器中的数据（不使用$watch）。

侧菜单的控制器和标头的控制器（同级控制器）可以相互通信吗？没有父母的帮助？


正文.html 

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

标题.html

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

标头控制器.js

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

侧边菜单.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>

侧边菜单控制器.js

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

正如我的评论中所述，您可以使用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>

这是一个工作小提琴，说明了这个问题：小提琴

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

为了更深入地挖掘，这个SO主题可能是一个好的开始：服务，工厂和提供商之间的区别

相关文章：