77

我有以下指令：

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

谢谢

4

2 回答 2

110

阅读Angularjs 官方网站说明：

@ 或 @attr - 将本地范围属性绑定到 DOM 属性的值。结果始终是字符串，因为 DOM 属性是字符串。如果未指定 attr 名称，则假定属性名称与本地名称相同。给定范围的小部件定义：{ localName:'@myAttr'}，然后小部件范围属性 localName 将反映 hello {{name}} 的插值。随着 name 属性的变化，小部件范围上的 localName 属性也会发生变化。该名称是从父范围（不是组件范围）读取的。

所以你只能发送一个字符串，要传递一个对象，你需要使用=.

   scope: {
        details: '=',
    },

你的 HTML 看起来像

<div teamspeak details="data.details"></div>
于 2013-09-22T02:10:33.893 回答
39

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

<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服务注入您的指令）

重要提示： 我没有用 angular 2 测试过这个方法。

于 2015-07-10T21:15:14.857 回答