更新

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？！
这是一个示例，但如果您提供plunker示例代码，可以帮助您更轻松。

更新

首先你的控制器在错误的地方需要移动它，所以地址指令可以在控制器的范围内，以便它可以访问地址对象。
其次你有2个未定义的变量：街道和城镇。
你需要隔离范围，这样每个指令都不会弄乱另一个指令的变量。

这是一个有效的plunker 希望这有帮助。

AngularJS - 更改指令的范围

1 个答案:

更新