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

谢谢

Answer 1

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

@或@attr – 将本地范围属性绑定到DOM属性的值。 结果总是一个string，因为DOM属性是string。 如果没有指定attr名称，则假定属性名称与本地名称相同。 给定范围的小部件定义：{localName：'@ myAttr'}，那么widget范围属性localName将反映hello {{name}}的内插值。 随着名称属性的更改，widget属性的localName属性也会发生变化。 该名称是从父范围（不是组件范围）读取的。

所以你只能发送一个string来传递一个对象，你需要使用=来设置一个双向的绑定。

  scope: { details: '=', }, 

而你的HTML看起来像

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

Answer 2

有人问如何做，而不隔离范围，这里是一个解决scheme：

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

如果attrs.details中的任何值应该用angular度{{…}}expression式dynamic设置，我们甚至可以使用$ interpolate …

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

（不要忘记在你的指令中注入$ interpolate服务）

重要提示：我没有用angular度2testing这个方法。