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将反映hello {{name}}的内插值.随着name属性的更改,widget命名空间上的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);
            }
        }
    };
});

我们甚至可以使用$interpolateif中的任何值attrs.details应该使用angular {{...}}表达式动态设置...

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

(不要忘记将$interpolate服务注入您的指令)

重要说明: 我没有使用角度2测试此方法.