AngularJs передача сложных данных в директиву

у меня есть следующие директивы:

<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' }
                }
}

и я хочу, чтобы это создать ссылку на основе данных внутри

2 67
angularjs

2 ответа:

Читать далее официальный сайт Angularjs пояснение :

@ или @attr-привязать свойство локальной области к значению DOM атрибут. Результатом всегда является строка, так как атрибуты DOM веревка. Если имя attr не указано, то имя атрибута предполагается, что это то же самое, что и локальное имя. Дано и виджет определение области: { localName: '@myAttr' }, тогда свойство области виджета localName будет отражать интерполированную стоимость привет {{имя.}} По мере изменения атрибута name так же будет свойство localName в области виджета. Имя считывается из родительская область (не область компонентов).

таким образом, вы можете отправить только строку, чтобы передать объект, вам нужно настроить двунаправленную привязку с помощью =.

   scope: {
        details: '=',
    },

и ваш HTML будет выглядеть как 

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

кто-то спросил о том, как это сделать, не изолируя область, вот решение:

<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.

35