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 official site解释：

@或@attr - 将本地范围属性绑定到DOM的值属性。由于DOM属性，结果总是一个字符串字符串。如果未指定attr名称，则属性名称为假设与本地名称相同。范围的给定和小部件定义：{localName：'@ myAttr'}，那么widget作用域属性localName将反映插值 hello {{name}}的值。由于名称属性发生了变化，因此小部件范围上的localName属性。该名称是从父范围（不是组件范围）。

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

   scope: {
        details: '=',
    },

您的HTML看起来像

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

Answer 2

有人询问如何在不隔离范围的情况下这样做，这是一个解决方案：

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

如果$interpolate中的任何值都应使用角度{{...}}表达式动态设置，我们甚至可以使用attrs.details ...

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

（不要忘记将$interpolate服务注入您的指令）

重要提示：我没有使用角度2测试此方法。

AngularJs将复杂数据传递给指令

2 个答案: