Mám pár apps, že značka $http.get() hovory a ja som chcel byť schopní Ukázať pekne formátovaného chybového hlásenia s škaredé chyby Podrobnosti skryté, ale dostupné.  V podstate, this:

A potom ak používateľ klikne na chybu, Oni vidia viac info:

Jednoduché veci.  Pretože presne rovnaký potenciál chyba sa môže vyskytnúť správne obrazovke, ako aj na obrazovku koncového používateľa, jasne to nazýva vlastné uhlové smernice.  SOM  našiel toto Vynikajúca séria článkov (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) veľký Dan Wahlin.  Po jeho radu, Veľmi rýchlo vytvorený <Ahoj-world> smernica a presťahoval sa do mojej zložitejšie chyba displeja stierka. Bežal som do trochu problémy s touto zložitejšie smernicou.  Šťastne, druh náhodou, Som povedal WebStorm (editor používam v týchto dňoch) že JS súboru uhlové súborov a pomohlo mi zistiť problém.  Je to kód pre samotnej smernice:

angular.module("CDLApp").smernica("generalCdlErrorHandler", Funkcia() {

    return {
        obmedziť: "E",
        nahradiť: pravda,

        rozsah pôsobnosti: {
            retrieveLastConfigurationError: "&"
        },

        šablóny:
          '<div class = "upozorniť upozornenie-nebezpečenstvo" úloha = "upozornenie" ng-init = "doShowExpandedErrorDetails = true" ng-Zobraziť = "retrieveLastConfigurationError()">' +
          "Tam bola chyba vstupno-výstupných operácií alebo iných.  To sa zvyčajne stáva, pretože konfiguračný súbor s údajmi nie je možné " +
          "našiel alebo konfiguračný súbor obsahuje nepresné informácie (ako je odkazovanie knižnice dokumentov " +
          "že neexistuje).' +
          '  <br />' +
          '  <div ng-Zobraziť = "doShowExpandedErrorDetails">' +
          '    <href = "#" NG-kliknite = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Kliknite tu pre skrytie podrobností." +
          '    </a>: ' +
          '    <br />' +
          '    <vopred>{{retrieveLastConfigurationError() | JSON}}</vopred>' +
          '    <br />' +
          '  </DIV>' +
          '  <div ng-Zobraziť = "!doShowExpandedErrorDetails">' +
          '    <href = "#" NG-kliknite = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Rozbaľte kliknutím sem Podrobnosti o chybách." +
          '    </a>' +
          '  </DIV>' +
          '</DIV>'
    };
});

V podstate, Som vytvoriť nový prvok s názvom "generalCdlErrorHandler".  Je potrebné sprístupniť funkciu nazýva retrieveLastConfigurationError a to je spracované v rozsahu objektu.  Pravdepodobne mohol som len použiť nadradeného rozsahu, ale že cíti lenivý.  Ak niekto myslí, že som mal urobiť, že, Rád by som počul o tom v komentároch.

To bolo všetko v poriadku, ale nebolo nič dostať.  Žiadne chyby vyskočila v konzole (aspoň raz som opravené všetky chyby sx som vytvoril na ceste).  Jednoducho nemali dostať žiadny výstup zo smernice.  Išiel a pridal niektoré statický text pred ng-Zobraziť smernice a * urobil * tú. To ma napadlo, že možno smernice nesmel implicitne vytvoriť nové vars ako "doShowExpandedErrorDetails" alebo "ng-init" tam. 

Išiel som späť do HTML vidieť, keby som mal typ a tentoraz WebStorm mi pomohol.  Som mal boli okolo vo funkcii retrieveLastConfigurationError takhle:

<všeobecné-cdl-chyba-obsluha retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</všeobecné-cdl--obslužný program chýb>

Ale to naozaj treba toto:

<všeobecné-cdl-chyba-Vyber-posledný-konfigurácia-chyba obsluhy = "CDLController.retrieveLastConfigurationError()">
</všeobecné-cdl--obslužný program chýb>

WebStorm bol dosť chytrý, aby vedieť, že to muselo byť rozdelené.  Ak to nemal túto nápovedu, Ja by pravdepodobne byť stále problémov to .  Zábava times!

Trik je to: Nielenže je názov smernice prvok rozdeleným slovom, Takže sú všetky atribúty môžete pridať k nemu.  Akonáhle som pridal pomlčky, to všetko fungovalo skvele.  Dan výučba stalo používať krátke názvy jednej, Takže neurobil pripojenie.

Dúfam, že to pomôže niekto.

</koniec>

Vyberajte môj blog.

Nasledujte ma na stebėtų na http://www.twitter.com/pagalvin