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個未定義的變量：街道和城鎮。
• 而且您需要隔離作用域，以使每個指令都不會與另一個指令的變量混淆。

這是一個正在工作的小伙子 。
希望對您有所幫助。