javascript - AngularJS - 更改指令的范围

Question

我正在尝试设置一个 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>

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

如果您需要我添加任何进一步的信息，请告诉我。

编辑

这是一个Plunker我设置它是为了说明我想要实现的目标。

Answer 1

你需要隔离你的指令的范围，这样就不会混淆 Angular 。 并且您的对象以这种方式更好地构造:

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？!
这是一个示例，但如果您提供 plunker使用示例代码可以帮助您变得更容易。

更新:

• 首先，您的 ng-controller 位于错误的位置，您需要将其向上移动，以便 address 指令可以在 Controller 的范围内，以便它可以访问 address 对象。
• 其次，您有 2 个 undefined variable :街道和城镇。
• 并且您需要隔离作用域，这样每个指令就不会混淆另一个指令的变量。

这是一个有效的 plunker .
希望对您有所帮助。