AngularJs ディレクティブに複雑なデータを渡す

質問

以下のようなディレクティブがあります。

<div teamspeak details="{{data.details}}"></div>

これがオブジェクトの構造です。

data: {
                details: {
                    serverName: { type: 'text', value: 'my server name' },
                    port: { type: 'number', value: 'my port' },
                    nickname: { type: 'text' },
                    password: { type: 'password' },
                    channel: { type: 'text' },
                    channelPassword: { type: 'password' },
                    autoBookmarkAdd: { type: 'checkbox' }
                }
}

の中のデータに基づいて、リンクを生成するようにしたい。 data.details オブジェクトの中のデータに基づいてリンクを生成したいのです。 の内部の値にアクセスできないので、残念ながらうまくいきません。 details オブジェクトの内部の値にアクセスできないからです。 の内部値にはアクセスできないので、残念ながらうまくいきません。

<div teamspeak details="{{data.details.serverName.value}}"></div>

でアクセスできるのですが {{details}} .

以下は私のディレクティブコードです。

App.directive('teamspeak', function () {
    return {
        restrict: 'A',
        template: "<a href='ts3server://{{details.serverName.value}}:{{details.port.value}}'>Teamspeak Server</a>",
        scope: {
            details: '@details',
        },
        link: function (scope, element, attrs) {
        }
    };
});

ありがとうございます。

どのように解決するのですか？

読む Angularjs公式サイト の説明をご覧ください。

または@attr - ローカルスコープのプロパティをDOMの 属性の値にバインドします。DOM属性は文字列であるため、結果は常に文字列となります。 文字列です。attr名が指定されない場合、属性名はローカル名と同じとみなされます。 は、ローカル名と同じであると見なされます。スコープの定義とウィジェットが与えられています。{localName:'@myAttr' }とします。 というウィジェットの定義がある場合、ウィジェットのスコーププロパティである localName には の値を反映します。name 属性が変更されると、ウィジェットスコープの プロパティも変化します。この名前は コンポーネントスコープではなく）親スコープから読み込まれます。

このように文字列だけを送ることができるので、オブジェクトを渡すには、以下のように双方向のバインディングを設定する必要があります。 = .

   scope: {
        details: '=',
    },

そして、あなたのHTMLは次のようになります。

<div teamspeak details="data.details"></div>