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对象内的数据生成链接。
不幸的是它不工作，因为我不能访问任何内部的细节对象的值，但如果我传递一个简单的数据结构，如：

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

谢谢