我有以下指令:
<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对象的任何内部值,因此它不起作用,但是如果我将其传递给一个简单的数据结构,例如:
data.details
details
<div teamspeak details="{{data.details.serverName.value}}"></div>
我可以使用访问它{{details}}。
{{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}}的插值。随着name属性的更改,小部件作用域上的localName属性也会更改。名称是从父范围(不是组件范围)读取的。
因此,您只能发送一个字符串以传递对象,您需要使用设置双向绑定=。
=
scope: { details: '=', },
您的HTML看起来像
<div teamspeak details="data.details"></div>