77

次のディレクティブがあります。

<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) {
        }
    };
});

ありがとう

4

2 に答える 2

110

Angularjs の公式サイトの説明を読む:

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

したがって、文字列のみを送信できます。オブジェクトを渡すには、を使用して双方向バインディングを設定する必要があります=。

   scope: {
        details: '=',
    },

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

<div teamspeak details="data.details"></div>
于 2013-09-22T02:10:33.893 に答える
39

誰かがスコープを分離せずにそれを行う方法について尋ねましたが、ここに解決策があります:

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

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

角度のある {{...}} 式で$interpolate値を動的に設定する必要があるかどうかを使用することもできます...attrs.details

scope.details = scope.$eval($interpolate(attrs.details)(scope));

$interpolate(サービスをディレクティブに挿入することを忘れないでください)

重要な注意: angular 2 でこの方法をテストしていません。

于 2015-07-10T21:15:14.857 に答える