AngularJs传递复杂的数据指令 [英] AngularJs Passing complex data to directive

问题描述

我有以下指令：

<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 对象里面的数据来生成一个链接。
遗憾的是它不工作，因为不知何故，我水湿访问的详细信息对象任何内在价值，但如果我传递一个简单的数据结构如下：

and I want it to generate a link based on the data inside the data.details object. Unfortunately it doesn't work since somehow I cann't access any inner values of the details object, but if I am passing it a simple data structure like:

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

我可以使用 {{}细节} 。

这是我的指令code：

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

感谢

推荐答案

阅读 Angularjs官方网站说明：

@或@attr - 局部范围的属性绑定到DOM的价值
  属性。结果总是一个字符串，因为DOM属性
  字符串。如果没有指定ATTR名字，那么属性名称
  假定为相同的本地名称。给出的范围小部件的定义：{的localName：'@ myAttr}，
  然后部件scope属性的localName将反映插值
  你好价值{{名}}。正如其名称属性更改因此将
  在widget范围localName属性。这个名字是从读
  父作用域（而不是组件范围内）。

@ or @attr - bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localName:'@myAttr' }, then widget scope property localName will reflect the interpolated value of hello {{name}}. As the name attribute changes so will the localName property on the widget scope. The name is read from the parent scope (not component scope).

所以，你可以只发送一个字符串，传递一个对象，你需要建立一个双向使用的定向结合 = 。

So you can send only a string, to pass an object, you need to set-up a bi-directionnal binding using =.

   scope: {
        details: '=',
    },

和你的HTML将看起来像

And your HTML will looks like

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

这篇关于AngularJs传递复杂的数据指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！