Javascript AngularJS-更改指令的范围

我正在尝试设置一个Angular指令，以便可以重用一段HTML。我已经设法实现了这一点，但我面临的问题是，当我想将一些值从包含HTML的模板传递到该模板HTML中时

为了简单起见，我将使用一个具有多个地址的客户示例（在本文中，客户是一个对象，每个地址实例是附加到客户的另一个对象）

数据示例：

var customer = {
    forename: "John",
    surname: "Smith",
    address1: {
        street: "123 Street",
        town: "Georgeville",
    },
    address2: {
        street: "67 Maple Grove",
        town: "SomeTown"
    }
};

以下是我的指令设置示例：

var module = angular.module(...);
module.directive("address", function () {
    return {
        restrict: 'A',
        templateUrl: '/AddressView.html'
    };
});

以及我尝试的用法：

<div ng-model="customer">
    <div address></div>
    <div address></div>
</div>

为了能够将客户的地址传递到模板化HTML，我希望这样做：

<div ng-model="customer">
    <div address ng-model="customer.address1"></div>
    <div address ng-model="customer.address2"></div>
</div>

我可能误解了指令的目的，或者这是不可能的，但如果有人有任何建议，我们将不胜感激

如果您需要我补充更多信息，请告诉我

编辑

---

这里是我设置的一个示例，试图说明我要实现的目标。

您需要隔离指令的范围，这样就不会因为角度问题而混淆。 您的对象以这种方式构造得更好：

var customer = {
    forename: "John",
    surname: "Smith",
    addresses: [
        address1: {
            street: "123 Street",
            town: "Georgeville",
        },
        address2: {
            street: "67 Maple Grove",
            town: "SomeTown"
        }
    ]
};

通过这种方式，您可以执行以下操作：

<div class="customer">
    <div address ng-repeat="address in customer.addresses">
        {{address.town}} {{address.street}}
    </div>
</div>

{{地址.城镇}{{地址.街道}

我不知道你为什么在这里用ng模型
这是一个示例，但如果您提供一个示例代码来帮助您，则会更容易

更新：

• 首先，您的ng控制器位于错误的位置，您需要将其向上移动，以便address指令可以位于控制器的范围内，以便它可以访问address对象
• 其次，有两个未定义的变量：street和town
• 您需要隔离作用域，这样每个指令就不会弄乱另一个指令的变量

这是一份工作报告。

---

希望能有所帮助。

谢谢您的回复。我正在努力研究如何在多个地方使用

地址

HTML（不一定是在一个对象集合中-我可能希望传入单个对象）。我将研究建立一个Plunker的例子。太棒了！我缺少的是隔离，以及通过directive属性传递对象。是时候了解范围隔离了。干杯检查这个网站，它有一个伟大的视频AngularJS和隔离范围从视频16至20和其他有趣的东西。