kątowa dyrektywa z wielu szablonów

Question

Zadanie:

• Aby wyświetlić kontakt.
• Kontakt to dane JSON, powiedzmy {nazwa: "Znak", lokalizacja: "Anglia", telefony: [...]}.
• kontaktowe można wykazać na wiele sposobów: compact/szczegółowy/wzmocnione z dodatkową informacją (wspólny kontaktów - dodatkowe dyrektywy)

Ponieważ styk może zostać pokazany na różnych stronach w różnych miejscach, to naturalnie stworzyć dyrektywę (widget) do kontaktu, ale tutaj jest pytanie: "Jak zorganizować ten sam widget z wieloma szablonami?"

Opcje:

1. utworzyć jedną dyrektywę z jednej matrycy, która ukrywa sekcje według skontaktować "typ" - duży szablon z możliwie dużą ilością ng przełącznikami oraz ng-IF
2. Utwórz dyrektywę dla każdego szablonu - prawie samych dyrektyw tylko z innym szablonem (lub szablonemURL)
3. Aby load templates dynamically while linking - ma problemy z transkluzji i zastępując (atrybuty przejmująca)

Whats your wrażenia z rozwiązywaniem tych problemów?

Answer 1

Osobiście uważam, że opcja 2 oferuje czyste oddzielenie trybów wyświetlania. Stworzyłem numer working CodePen example, aby zilustrować, w jaki sposób można to osiągnąć, korzystając z oddzielnych dyrektyw dla każdego szablonu.

Metoda zastosowana w moim przykładzie CodePen wykorzystuje fabrykę szablonów, która jest wprowadzana do każdej dyrektywy przez Angular DI. Implementacja fabryki szablonów jest bardzo czysta, ponieważ używa tylko ciągów szablonów ng-include dla każdego z obsługiwanych trybów wyświetlania (kompaktowy & szczegółowy). Rzeczywiste szablony HTML (częściowe) mogą być umieszczane w zewnętrznych plikach widoku lub wewnętrznych blokach skryptów.

Korzystanie dyrektyw kontaktowe są proste:

<contact compact ng-repeat="contact in contacts" ng-model="contact"></contact> 

To tworzy kompaktową wersję listy kontaktów.

<contact detailed ng-repeat="contact in contacts" ng-model="contact"></contact> 

Spowoduje to utworzenie szczegółowej listy kontaktów.

Przyznam, że nie wdrożyłem takiego kodu do produkcji, więc może istnieć skalowalność lub inne problemy, których nie brałem pod uwagę. Mam nadzieję, że dostarczony przeze mnie kod odpowiada na twoje pytania lub przynajmniej dostarcza inspiracji do dalszych poszukiwań.

Answer 2

mam budować nowe podejście pracuje na Adama przykład i korzystając również próbki od kanciastych Dokumenty, w których mówią o funkcjach w nieruchomości templateUrl https://docs.angularjs.org/guide/directive, to plunker od kanciastych docs: http://plnkr.co/edit/h2CSf2WqCLYfPvzL9WQn?p=preview

.directive('myCustomer', function() { 
    return { 
     templateUrl: function(elem, attr){ 
     return 'customer-'+attr.type+'.html'; 
     } 
    }; 
    }); 

I to jest mój Remixed rozwiązanie:

http://codepen.io/anon/pen/wawOyz?editors=101

app.factory('templates', function() { 
    return { 
    compact: 'compact', 
    detailed: 'detailed' 
    }; 
}); 

app.directive('contact', function(templates) { 
    return { 
    restrict: 'E', 
    templateUrl: function($elem, $attr){ 
     return templates[$attr.mode];  
    }, 
    scope: { 
     contact: '=ngModel' 
    } 
    }; 
}); 

lubiłem t pomysł posiadania wszystkich adresów szablonów w jednej fabryce, ale uważam dyrektywę za tryb dość powtarzalną i jeśli masz kilka elementów używających tego podejścia, będziesz potrzebował przestrzeni nazw (tekst kontaktowy, tekst wiadomości e-mail, tekst firmowy), nie ulegają awarii.

Nie jestem jeszcze pewien, czy jest to lepszy sposób na przejście, jest krótszy i bardziej suchy, ale może jest trudniejszy do przetestowania lub mniej konfigurowalny. Po prostu chciałem podzielić się podejściem, na wypadek gdyby mogło pomóc każdemu.