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

发布时间：2020-12-17 07:16:59 所属栏目：安全来源：网络整理

导读：我已经和AngularJS玩了几天,想出了一些我还无法解决的问题. 每个联系人都可以有多个地址和电话号码.由于插入和编辑联系人在UI级别需要几乎相同的功能,因此我决定创建一个类似以下的指令来处理地址和电话：地址： (function () { var app = angular.module("

我已经和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",templateUrl: "/phonesEditorTemplate.html",controller: function ($scope) {
                this.phones = [
                    // this will hold 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之间交换数据(带有我想要的数据的变量是：来自addressesEditor指令的this.addresses和来自phonesEditor指令的this.phones).

我怎么能做到这一点？

解决方法

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

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

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

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

希望有所帮助

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!