AngularJs将复杂数据传递给指令

Question

我有以下指令：

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

谢谢

Answer 1

在Angularjs官方网站上阅读说明：

@或@attr-
将本地范围属性绑定到DOM属性的值。由于DOM属性是字符串，因此结果始终是字符串。如果未指定attr名称，则假定属性名称与本地名称相同。给定范围的小部件定义：{localName：’@
myAttr’}，则小部件范围属性localName将反映您好{{name}}的插值。随着name属性的更改，小部件作用域上的localName属性也会更改。名称是从父范围（不是组件范围）读取的。

因此，您只能发送一个字符串以传递对象，您需要使用设置双向绑定=。

   scope: {
        details: '=',
    },

您的HTML看起来像

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