一个指令，并在不同的模块控制器之间的数据共享 [英] Share data between a directive and a controller in different modules

问题描述

我一直在玩AngularJS只是几天的东西，我还没能解决走了过来。

I have been playing with AngularJS for just a few days and came up with something that I could not solve yet.

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

Each contact can have multiple addresses and phone numbers. Since inserting and editing a contact will require almost the same functionality at the UI level, I decided to create a directive like to following to deal with addresses and phones:

地址：

(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.
                ];

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

我省略了指令内声明的方法与地址有效和电话变量。

两个指令都使用这样的HTML：

Both directives are used like this at the 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>

这工作完全按照我预想的，有电话和地址被正确记录。

This work exactly as I expected to, with phones and addresses being correctly recorded.

现在，我想要做的是检索指令内的电话和地址，并将其发送到服务器，以便在在数据库的接触被记录下来。

Now, what I want to do is to retrieve the phones and addresses inside the directive and send them to the server in order to be recorded at the contact at the database.

我知道如何执行AJAX，但我不知道如何来交换指令和我想是该数据的 InsertController （变量之间的数据： this.addresses 从 addressesEditor 指令和 this.phones phonesEditor 指令）。

I know how to perform the AJAX, but I have no idea how to exchange data between the directives and the InsertController (the variables with the data I want are: this.addresses from addressesEditor directive and this.phones from phonesEditor directive).

我怎样才能做到这一点？

How can I accomplish this?

推荐答案

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

You can use a shared Service/Factory with the data you want to share.

要说明它是如何做的，我使用的是服务共享控制器和指令之间的数据创造了一些例如code：

To illustrate how it can be done, I created some example code using a service to share data between Controllers and Directives:

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

http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=$p$ PVIEW

希望帮助

这篇关于一个指令，并在不同的模块控制器之间的数据共享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！