AngularJS-更改指令的范围

Question

我正在尝试设置一个Angular Directive，以便我可以重用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>

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

让我知道您是否需要我添加任何其他信息。

编辑

这是我设置的Plunker ，以说明我要实现的目标。

Answer 1

您需要隔离指令的作用域，以免混淆角度。 这样，您的对象将具有更好的结构：

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-model ？！
这是一个示例，但是如果您为矮人提供示例代码来帮助您，则会更容易。

更新：

• 首先，您的ng-controller放在错误的位置，您需要将其上移，以便address指令可以在控制器的范围内，以便它可以访问地址对象。
• 其次，您有2个未定义的变量：街道和城镇。
• 而且您需要隔离作用域，以使每个指令都不会与另一个指令的变量混淆。

这是一个正在工作的小伙子 。
希望对您有所帮助。