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

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

为了说明如何完成，我使用服务在控制器和指令之间共享数据创建了一些示例代码：

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

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

希望有所帮助

在不同模块中的指令和控制器之间共享数据

1 个答案: