AngularJs将复杂数据传递给指令

我有以下指示：

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

我希望它根据

data.details

对象中的数据生成一个链接。 不幸的是，它不起作用，因为不知何故我无法访问

详细信息

对象的任何内部值，但如果我向它传递一个简单的数据结构，如：

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

谢谢

阅读解释：

@或@attr-将局部作用域属性绑定到DOM的值 属性由于DOM属性是 串。如果未指定属性名，则属性名为 假定与本地名称相同。给定和小部件范围定义：{localName:'@myAttr'}， 然后widget作用域属性localName将反映插入的 hello{{name}的值。随着“名称”属性的更改，名称也将更改 小部件范围上的localName属性。该名称是从 父范围（不是组件范围）

因此，您只能发送字符串，要传递对象，需要使用

=

设置双向绑定

   scope: {
        details: '=',
    },

您的HTML将如下所示

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

---

有人问到如何在不隔离作用域的情况下执行此操作，下面是一个解决方案：

App.directive（'teamspeak'，function（）{
返回{
限制：“A”，
模板：“”，
链接：函数（范围、元素、属性）{
如果（属性详细信息）{
scope.details=范围$eval（属性详细信息）；
}
}
};
});

我们甚至可以使用

$interpolate

如果

attrs.details

中的任何值都应该使用角度{{…}表达式动态设置

scope.details=scope.$eval（$interpolate（attrs.details）（scope））

（不要忘记在指令中插入
$interpolate
服务）

重要提示：我还没有用angular 2测试过这个方法。
这似乎不适用于TypeScript。我所做的是创建一个定义范围的接口。在该接口中，我有一个自定义对象。将接口分配给作用域时，我无法执行
object='='
，因为您无法将字符串分配给类型为
ObjectType
的对象。关于如何使用TypeScript执行此操作，您有什么建议吗？也可以使用绑定：{}我会在它工作后发布一个答案：）如果您使用ATTR，您将很难将此指令转换为angular 2。这只是一个个人提示。谢谢@sh977218，我已经添加了一个注意事项，这个方法没有用angular 2进行测试
   scope: {
        details: '=',
    },

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