1

HTML の一部を再利用できるように、Angular ディレクティブを設定しようとしています。私はこれを達成することができましたが、私が直面している問題は、含まれている 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>

ディレクティブの目的を誤解したか、これは不可能かもしれませんが、何か提案があれば大歓迎です。

さらに情報を追加する必要がある場合はお知らせください。

編集

これは、私が達成しようとしていることを説明するために設定したプランカーです。

4

1 に答える 1

2

物事が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 が間違った場所にあったため、アドレス オブジェクトにアクセスできるように、アドレス ディレクティブがコントローラーのスコープ内にあるように移動する必要があります。
  • 次に、未定義の変数が 2 つあります。通りと町です。
  • また、各ディレクティブが他のディレクティブの変数を台無しにしないように、スコープを分離する必要があります。

これが動作中のplunkerです。
この助けを願っています。

于 2013-04-12T09:30:38.673 に答える