angularjs - 在不同模块中的指令和 Controller 之间共享数据

Question

我用 AngularJS 玩了几天，想出了一些我还不能解决的问题。

每个联系人可以有多个地址和电话号码。由于插入和编辑联系人在 UI 级别需要几乎相同的功能，因此我决定创建一个类似以下的指令来处理地址和电话:

地址:

(function () {
    var app = angular.module("AddressesEditorModule", []);
    app.directive("addressesEditor", function () {
        return {
            restrict: "E",
            templateUrl: "/addressesEditorTemplate.html",
            controller: function ($scope) {
                this.addresses = [
                    // this will hold addresses.
                ];

                // ...
            }
        }
})();

电话:

(function () {
    var app = angular.module("PhonesEditorModule", []);
    app.directive("phonesEditor", function () {
        return {
            restrict: "E",
            templateUrl: "/phonesEditorTemplate.html",
            controller: function ($scope) {
                this.phones = [
                    // this will hold phones.
                ];

                // ...
            }
        }
})();

我省略了指令中声明的方法来使用 addresses和 phones变量。

这两个指令在 HTML 中都是这样使用的:

<div ng-app="ContactModule">
    <div ng-controller="InsertController as insertCtrlr">
        <!-- some other elements handling contact name goes here -->

        <addresses-editor></addresses-editor>
        <phones-editor></phones-editor>
    </div>
</div>

这项工作完全符合我的预期，电话和地址被正确记录。

现在，我要做的是检索指令中的电话和地址并将它们发送到服务器，以便记录在数据库中的联系人处。

我知道如何执行 AJAX，但我不知道如何在指令和 InsertController 之间交换数据(带有我想要的数据的变量是: this.addresses 来自 addressesEditor 指令和 this.phones 来自 phonesEditor 指令)。

我怎样才能做到这一点？

Answer 1

您可以将共享服务/工厂与您想要共享的数据一起使用。

为了说明如何做到这一点，我创建了一些示例代码，使用服务在 Controller 和指令之间共享数据:

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: ''
    }
  };
});

http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=preview

希望有帮助