Mam kilka aplikacji, że marka $http.get() rozmowy i chciał być w stanie wykazać ładnie sformatowany komunikat ze brzydki błąd szczegóły ukryte, ale dostępne. Zasadniczo, to:
A jeśli użytkownik kliknie na błąd, widzą więcej:
Proste rzeczy. Ponieważ dokładnie ten sam błąd potencjalnych może pojawić się na ekranie administracyjnych, jak również na ekranie użytkownika końcowego, wyraźnie wezwała do niestandardowych dyrektywy kątowe. I Znalazłem ten wybitny serii artykułów (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) przez wielki Dan Wahlin Momme. Zgodnie z jego Radą, Bardzo szybko stworzył <Witam świat> dyrektywy i przeniósł się do moich bardziej złożone błąd wyświetlania rakla. Wpadłem na nieco kłopotów z niniejszej dyrektywy bardziej złożone. Szczęśliwie, rodzaju przypadkiem, Powiedział, WebStorm (redaktor, używam tych dni) że plik JS był pliku kątowego i to pomogło mi obliczaæ na zewn¹trz ten problem. Jest to kod dla samej dyrektywie:
Angular.module("CDLApp").dyrektywy("generalCdlErrorHandler", Funkcja() {
Powrót {
ograniczyć: "E",
Zamień: PRAWDA,
zakres: {
retrieveLastConfigurationError: "&"
},
szablon:
'<DIV class = "alert alert niebezpieczeństwo" rola = "wpisu" ng-init = "doShowExpandedErrorDetails = true" ng-show = "retrieveLastConfigurationError()">' +
"Wystąpił błąd we/wy lub inny błąd. Zazwyczaj dzieje się tak ponieważ plik danych konfiguracji nie może być " +
"znalezione lub plik konfiguracyjny zawiera nieprawdziwe informacje (jak odwołanie do biblioteki dokumentów " +
' nie istnieje).' +
' <BR />' +
' <DIV ng Pokaż = "doShowExpandedErrorDetails">' +
' <href = "#" ng kliknij = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Kliknij tutaj, aby ukryć szczegóły." +
' </a>: ' +
' <BR />' +
' <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
' <BR />' +
' </DIV>' +
' <DIV ng Pokaż = "!doShowExpandedErrorDetails">' +
' <href = "#" ng kliknij = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
"Kliknij tutaj, aby rozwinąć szczegóły błędu." +
' </a>' +
' </DIV>' +
'</DIV>'
};
});
Zasadniczo, Tworzę nowy element o nazwie "generalCdlErrorHandler". To musi mieć dostęp do funkcji o nazwie retrieveLastConfigurationError, i który jest obsługiwany w zakresie obiektu. Prawdopodobnie może mieć tylko używane zakres nadrzędnego, ale czuje się leniwy. Jeśli ktoś uważa, że należy zrobić, Chciałbym usłyszeć o tym w komentarzach.
To było wszystko dobrze, ale nic nie dostaję. Nie ma błędów pojawiło się w konsoli (przynajmniej raz poprawiłem wszystkie błędy sx, utworzonej w drodze). Po prostu miałem żadnych danych wyjściowych z niniejszej dyrektywy. Poszedł i dodaje statyczny tekst przed dyrektywy ng Pokaż i * czy * się, że. To mnie myśleć, że może dyrektywy wolno było jawnie utworzyć nowy vars jak "doShowExpandedErrorDetails" lub "ng-init" się tam.
Wrócił do HTML wobec zobaczyć jeśli ja miał typu i tym razem WebStorm pomógł mi. Miał przechodzi w funkcji retrieveLastConfigurationError, jak to:
<ogólne cdl błąd obsługi retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</ogólne cdl błąd obsługa>
Ale to naprawdę potrzebne do tego:
<ogólne cdl błąd obsługi pobierania ostatnio konfiguracja błąd = "CDLController.retrieveLastConfigurationError()">
</ogólne cdl błąd obsługa>
WebStorm był wystarczająco inteligentny, aby wiedzieć, że to musiał być dzielone. Jeśli nie to pod warunkiem, że wskazówka, I chcieliby chyba być nadal rozwiązywania problemów to 
. Zabawy razy!
Sztuką jest to: nie tylko nazwa elementu dyrektywy jest dzielone, tak są atrybuty, które można dodać do niego. Dodani łączników, to wszystko pracowa³ wielki. Dan samouczek zdarzyło się użyć krótkiego pojedynczych nazw, więc nie nawiązania połączenia.
Spodziewaæ siê ten wspó³pracownik ktoœ.
</koniec>
Follow me on Twitter wiek na http://www.twitter.com/pagalvin
.