angularjs Uboczny złożonych danych z dyrektywą

Question

mam następujące dyrektywy:

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

Jest to struktura obiektu:

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

i chcę go aby wygenerować link na podstawie danych zawartych na data.details obiekt. Niestety to nie działa, ponieważ jakoś cann't dostęp do wszelkich wewnętrznych wartości details obiektu, ale jeśli jestem przekazując mu prostą strukturę danych jak:

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

mogę do niego dostęp za pomocą {{details}} .

Oto moja dyrektywa Kod:

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

Dzięki

Answer 1

przeczytać na Angularjs official site wyjaśnienia:

@ lub @attr - wiążą się z lokalnym zakresu własności do wartości DOM Atrybut . Wynik jest zawsze ciągiem, ponieważ atrybuty DOM są ciągami . Jeśli nie podano żadnej nazwy attr, nazwa atrybutu jest przyjęta jako taka sama jak nazwa lokalna. Podana definicja widma zakresu: {localName: "@ myAttr"}, , a następnie właściwość zakresu widgetu localName będzie odzwierciedlać interpolowaną wartość hello {{name}}. Wraz ze zmianą atrybutu nazwy zostanie zmieniona właściwość localName w zakresie widżetu o wartości . Nazwa jest odczytywana z zakresu nadrzędnego (bez zakresu komponentu).

Możesz przesłać tylko ciąg znaków, aby przekazać obiekt, musisz ustawić powiązanie dwukierunkowe, używając =.

scope: { 
     details: '=', 
    }, 

A twój HTML będzie wygląda

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

Answer 2

Ktoś poprosił o tym, jak to zrobić bez wyodrębniania zakres, oto rozwiązanie:

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

Możemy nawet użyć $interpolate, jeśli jakiekolwiek wartości w attrs.details sh ould być dynamicznie zestaw z kątowych {{...}} wyrażeń ...

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

(nie zapomnij, aby wstrzyknąć $interpolate usługę do swojego dyrektywy)

Ważna uwaga: mam nie testowano tej metody z kątową 2.