Question

我正在使用angular（1.4.7）编写SPA并为了降低复杂性，我一直试图将持久性逻辑抽象为工厂/存储库。

这没什么特别的，似乎工作正常。

我想要实现的一个功能是，当用户更新某些个人信息时，“父”范围可以更新。

请参阅示例https://jsfiddle.net/h1r9zjt4/

我已经看过各种实现方法，以及我见过的几种方法：

使用$ rootScope共享公共对象
我一直在尝试避免使用范围并仅使用controllerAs语法。这似乎是在控制器和视图之间保持严格/稳健分离的建议解决方案。
使用$ scope。$ parent访问所需的属性
由于类似的原因，这会将我的视图实现与我的控制器实现相结合。
使用$ on / $ emit在控制器之间进行通信
除了听起来像是最终的维护噩梦之外，这本质上意味着控制器了解其他控制器。不理想。

我理想的情况是有一个发布/子场景。

我的用户更新他们的详细信息将由存储库处理，存储库又发送命令或履行对该存储库的所有订阅者的承诺。

这是标准的角度模式吗？如果没有，那么合适的替代方案是什么？

Answer 1

虽然它主要与React世界有关，但你要找的是Flux。它甚至以flux-angular的形式移植到Angular。

Flux强制执行您对应用程序中数据流动的看法。

允许您发布和订阅更改的共享模型称为商店。但是，你不会以传统的pubsub方式与他们交谈。

商店

商店负责管理一些数据并处理您触发的任何操作。例如，柜台的商店可能看起来像这样：

app.store('CounterStore', function() {
  return {
    count: 0,
    increment: function() {
      this.count = this.count + 1;
      this.emitChange();
    },
    decrement: function() {
      this.count = this.count - 1;
      this.emitChange();
    },
    exports: {
      getCount: function() {
        return this.count;
      }
    }
  };
});

然后将您的商店注入控制器或指令以监听更改。

将此视为pub / sub架构的订阅部分。

app.directive('Counter', function() {
  return {
    template: '<div ng-bind='count'></div>',
    controller: function($scope, CounterStore) {
      $scope.listenTo(CounterStore, function() {
        $scope.count = CounterStore.getCount();
      });
    }
  };
});

操作

Flux难题中的另一个部分是调度动作。这是关于类固醇的pub / sub架构的出版部分。

您可以调度可序列化的操作，而不是像您对根范围的事件发射器那样发出事件，而Flux会为您完成其余的操作。

让我们使用Flux定义一个最终指令来控制前一个指令中的计数器。

app.directive('CounterControls', function() {
  return {
    template: '<button ng-click="inc()">+</button>' + 
              '<button ng-click="dec()">-</button>',
    controller: function($scope, flux) {
      $scope.inc = function() {
        flux.dispatch('increment')
      };

      $scope.dec = function() {
        flux.dispatch('decrement');
      };
    }
  };
});

此代码甚至不知道商店！它只知道这些是单击这些按钮时应该调度的操作。

一旦调度了这些操作，Flux就会使用操作名称来调用商店中的相应功能。这些商店会更新他们的数据，如有必要，他们会发出更改，通知订阅者，以便他们也可以更新数据。

在两个指令之间共享计数器似乎有很多代码，但它是一个非常强大的想法，从长远来看，将保持应用程序的体系结构清晰简洁。

结论

Flux是一个非常酷的架构。以下是为什么它比你提到的其他解决方案更适合你的原因。

关注点分离

Flux允许您将所有状态管理代码移动到称为存储的松散耦合模块中。这样，您的控制器都不会知道任何其他控制器。

可序列化操作

如果您确保只调度可以序列化的操作，那么您可以跟踪应用程序中触发的每个操作，这意味着可以通过再次重新播放相同的操作来重新创建任何状态。

要了解这可能有多酷，请查看this video关于使用名为Redux的Flux实施的时间旅行。

单向数据

当数据仅向一个方向流动时，更容易推理您的程序。当您使用Flux时，没有理由与您孩子以外的任何组件进行通信。

  A---+
 / \  |
/   v |
B   D |
|  /  |
| /   |
C-----+

在更传统的pub / sub体系结构中，如果指令C想要与指令A和D进行通信，则必须维护一个复杂的纠缠层次结构，每次让一个指令或控制器知道时，管理越来越难以管理关于另一个。

目前还不清楚数据的流向，因为指令可以互相通信，无论它们在哪里。

  A <------------+
 / \             |
v   v            |
B   D  <----- [store]
|                ^
v                |
C --> [action] --+

使用Flux，您的指令只与他们的孩子和商店进行通信 - 数据在您的应用程序的一个方向上流动，使得更容易弄清楚值是如何到达某个地方，或者为什么调用函数。

Answer 2

使用$on/$emit绝对是一个可行的选择，但是你需要注意不要过度使用它，因为它可能会导致一个非常复杂的应用程序，很难调试和跟踪。

另一种方式（我认为在大多数情况下更好）是使用服务。由于服务本质上是单例，因此服务上的数据将在所有应用程序中共享。

因此，你可以拥有一个在父控制器和子控制器中注入的服务，一旦对子进行了更改，它将更新服务上的属性，父属将$watch属性和行为在改变时：

var app = angular.module('myApp', []);

app.factory('sharedService', function() {
    return {
        sharedAttr: ''
    }

});    

app.controller('childCtrl', function($scope, sharedService) {
    $scope.onAttrChange = function() {
        sharedService.sharedAttr = 'Value Changed';
    }
});

app.controller('parentCtrl', function($scope, sharedService) {
    $scope.$watch(function() {
            return sharedService.sharedAttr;
        },
        function(newVal, oldVal) {
            //do something with newValue
        });
});

Answer 3

我使用postaljs并向$ scope注入$ bus，如显示博客An angular.js event bus with postal.js

请注意，博客上的代码段会引发无法获取属性＆＃39;长度＆＃39;未定义的，我把它修改为：

app.config(function($provide) {
$provide.decorator('$rootScope', [
    '$delegate',
    function($delegate) {
        Object.defineProperty($delegate.constructor.prototype,
            '$bus', {
                get: function() {
                    var self = this;

                    return {
                        subscribe: function() {
                            var sub = postal.subscribe.apply(postal, arguments);

                            self.$on('$destroy',
                                function() {
                                    sub.unsubscribe();
                                });
                        },
                        //Fix to avoid postaljs v 2.0.4:513 Unable to get property 'length' of undefined
                        channel: function() { return postal.channel.apply(postal,arguments);  },
                        publish: function() { postal.publish.apply(postal,arguments); }
                    };
                },
                enumerable: false
            });

        return $delegate;
    }
]);

订阅控制器：

var subscription = $scope.$bus.subscribe({
            channel: "organizations",
            topic: "item.changed",
            callback: function(data, envelope) {
                // `data` is the data published by the publisher.
                // `envelope` is a wrapper around the data & contains
                // metadata about the message like the channel, topic,
                // timestamp and any other data which might have been
                // added by the sender.
            }
        });

发布控制器：

channel = $scope.$bus.channel('organizations');
channel.publish("item.changed",data);

如何使用AngularJS创建pub / sub模式

3 个答案:

商店

操作

结论

关注点分离

可序列化操作

单向数据