Javascript 在AngularJS中与一个控制器通信两个视图

我正在使用UI路由器进行Angular，我的应用程序有两个独立的视图：侧边栏和主视图。现在我需要在侧边栏视图中的某个操作之后更改主视图中的某个类

这是我的代码：

配置

.state('app.area', {
    url: '/area/:areaId',
    views: {
        '@': {
            template: require('./app/generic/genericWithSidebar.html'),
            controller: 'AreaCtrl'
        },
        'main@app.area': {
            template: require('./app/area/_area.html'),
            controller: 'AreaCtrl',
            controllerAs: 'CTRL',
        },
        'sidebar@app.area': {
            template: require('./app/area/_sidebar.html'),
            controller: 'AreaCtrl',
            controllerAs: 'CTRL',
        }
    },

控制器

class AreaCtrl {
    constructor($scope) {
        "ngInject";

        this.$scope = $scope;
        this.$scope.descriptionIsActive = false;
    }

    showAreaDescription() {
        this.$scope.descriptionIsActive = !this.$scope.descriptionIsActive;
    }
}

export default AreaCtrl;

以及侧栏和主视图的视图

// sidebar view
<span ng-click="CTRL.showAreaDescription()">show more</span>
// main view
<div ng-class="{'active': CTRL.descriptionIsActive}"></div>

//侧栏视图
显示更多
//主视图

---

我需要在视图之间进行通信，而不是在控制器之间进行通信，我只有一个控制器。

您可以在

视图

选项之外定义控制器，以便它在状态加载时只加载一次

stateProvider.state("app.area",{
   url:'/app.area',
   templateUrl: 'app_area_frame.html',
   controller:'AreaCtrl',
   controllerAs: 'CTRL',
   views:{
      'main':{
          template: require('./app/area/_area.html')
      },
      'sidebar':{
          template: require('./app/area/_sidebar.html')
      }
   }

})

用户界面路由器的嵌套视图“正确”的解决方案取决于主视图中的哪些更改导致导航更改

正如我刚才所说，如果你需要控制器彼此“交谈”，这通常是一个不好的迹象。这通常意味着您应该有一个

服务

，该服务负责在两个视图中绑定到的数据/状态

但是，如果您的更改实际上只是一个全局的装饰性导航（我想不出一个例子，但我不想说这是不可能的），那么“全局”导航控制器（例如在您的

身体上）可能是正确的。但我对此表示怀疑

因此，我的建议是：考虑是什么数据导致了更改，在其自己的服务中处理该数据的状态，并在需要时绑定到该服务属性。
状态意味着由服务封装，因此，事实上，如果您拥有应在整个应用程序中共享的状态，您应该创建一个服务

或者，你可以在更高的范围内拥有一个控制器，比如说你有一个应用程序的控制器，它可以被边栏和主页子范围继承。
也许这个答案不是你特定问题的确切答案。但从架构的角度来看，您不应该使用嵌套视图来处理带有侧边栏的主视图

因为这个侧边栏对于所有州都应该是相同的。因此，如果使用嵌套视图，每次都应该指定侧栏。此外，您还应该为每个州的边栏编写代码。这不是设计应用程序的推荐方法

我强烈建议你经历这一切

那么如何设计呢？

将侧边栏设置为简单模板，并使用ng include呈现页脚部分

<footer ng-include="'/sidebar.html'" ng-controller="sidebarController"></footer>



正如您所见，侧边栏有一个专用的控制器，您不需要将代码复制到每个主控制器。
需要注意的是，每个视图都会初始化一个新的
AreaCtrl
实例，每个实例都有自己的实例scope@charlietfl那么，我该怎么办？我是否应该删除视图的控制器定义并只保留给父级？可能是的。虽然你可以使用$broadcast处理这种情况，但对该应用的了解还不够。可能是重复的否，我没有访问视图中的控制器的权限：（你的意思是什么？：）很简单，操作表单控制器没有传播，我在主视图中使用的是，它工作正常…@Lukas他建议您对所有视图使用一个控制器。女巫是不对的。。。。但是它可以解决你的问题不，侧边栏对于不同的页面是不同的，所以我需要为它和main section设置单独的子视图。@Lukas好的，如果情况是这样的话，那么使用嵌套视图。那么，我在侧边栏中使用了一个，另一个控制器来执行操作，好吗？那样的话，一切都正常。Thx从顶部获取建议。