javascript - AngularJS 中的重型 Controller 通信

标签 javascript angularjs

我已经使用 AngularJS 实现了一个单页应用程序。该页面由中间的内容区域和围绕中心组装的部分组成,这些部分显示附加信息并提供操作中心的方法。

enter image description here

每个部分(称为 Side Info)和内容区域都有一个单独的 AngularJS Controller 分配给它们。目前,我通过 $rootScope.$broadcast$scope.$on() 进行通信,例如

app.controller('PropertiesController', function ($scope, $rootScope) {

    $scope.$on('somethingHappened', function(event, data){
        // react
    });

});

然后我调用与其他 Controller 通信:

$rootScope.$broadcast('somethingHappened', data);

我在 Controller 之间进行了很多通信。特别是如果内容区域发生某些事情,则必须采用多个辅助信息元素。另一种方式也很常见:用户提交表单(位于辅助信息中),内容区域和其他辅助信息元素必须采用。

我的问题: 有没有更好的方法来处理具有繁重 Controller 通信的 SPA

代码工作正常,但它已经变得有点困惑(例如,很难找到在何处处理哪些事件等)。由于该应用程序在接下来的几周内可能会增长很多,因此我想尽快进行这些更改(如果有更好的解决方案)。

最佳答案

这真的很有趣。 Pub/Sub 应该是这里的正确解决方案。

您可以通过使用 Angular 服务作为您的 MVC 模型,为您的项目添加额外的订单,并为每次更改更新此模型。这里的问题是你应该在你的服务中实现一个可观察的模式并注册到他们,以便实时同步。所以 - 我们回到 Pub/Sub(或您可以考虑的其他 Observable 解决方案......)。

但是,项目将以这种方式组织得更好。

例如 - SideInfo1Service 将是一个服务/模型。每个属性更改都会触发可观察到的更改,这将更改所有监听器:

myApp.factory('SideInfo1Service', function($scope){
    var _prop1; 
    return {
       setProp1: function(value){
           $scope.$broadcast('prop1Changed', value);
           _prop1 = value;       
       },
       getProp1: function(){
           return _prop1;
       }
    }
});

您可以找到那些关于使用 Angular 服务作为您的 MVC 模型的非常有趣的博客文章:

http://toddmotto.com/rethinking-angular-js-controllers/

http://jonathancreamer.com/the-state-of-angularjs-controllers/

并且,这篇文章是关于 Angularjs 中的可观察模式:

https://stackoverflow.com/a/25613550/916450

希望这会有所帮助(:

关于javascript - AngularJS 中的重型 Controller 通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28347728/

相关文章:

javascript - 无法显示来自服务器的数据

javascript - 使用 angularJS 获取值输入

javascript - 语法错误: missing: after property id

javascript - 动态符号检索错误: Win32 error 127 - even when importing self process

javascript - AngularJS 等待 foreach 内的所有异步调用完成

javascript - 是否可以从电子邮件中的链接触发 AMPscript?

javascript - VS2012 丢失的 JavaScript 调试器

javascript - Cordova Instagram 插件 : using with JPG images?

javascript - 使用 jQuery 加载图像并将其附加到 DOM

javascript - HOC import TypeError : Object(. ..) 不是函数