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>

Subskrybowanie mój blog.

Follow me on Twitter wiek na http://www.twitter.com/pagalvin