Imam nekaj apps, da bi $http.get() klici in želel biti zmožen razkazati a lepo oblikovanega sporočila o napaki z grdo napako podrobnosti skrite, vendar dosegljiv.  V bistvu, to:

In potem če uporabnik klikne na napako, vidijo več info:

Prepost tvar.  Ker točno isto potencialne napake se lahko pojavijo v upravnih zaslon, kot tudi končni uporabnik zaslon, jasno pozval meri kotni direktive.  I  našel to izjemne serije člankov (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) z veliki Dan Wahlin.  Po njegov nasvet, Sem zelo hitro zagnati krik in vik a <Hello-world> Direktiva in se preselil na moji kompleksnejše napake prikaz strgalo iz gume. Stekel sem v a košček od trud s to direktivo, bolj zapletene.  Srečno, nekako po naključju, Je povedal WebStorm (urejevalnik uporabljam te dni) da JS datoteko kotni datoteko in to pomočnik mi razbrati vprašanje.  To je koda za sama direktiva:

angular.module("CDLApp").Direktive("generalCdlErrorHandler", Funkcija() {

    vrnitev {
        omejujejo: "E",
        Zamenjaj: True,

        področje: {
            retrieveLastConfigurationError: "&"
        },

        predlogo:
          '<razred del = "opozori opozorilo-nevarnost" vlogo = "opozorila" NG-init = "doShowExpandedErrorDetails = true" NG-show = "retrieveLastConfigurationError()">' +
          "Prišlo do v/i napake ali druge napake.  To se običajno zgodi, ker konfiguracijo podatkovne datoteke ni bilo mogoče " +
          "najti ali pa konfiguracijska datoteka vsebuje netočne informacije (kot navajanje knjižnico dokumentov " +
          "da ne obstaja).' +
          '  <br />' +
          '  <div ng-show = "doShowExpandedErrorDetails">' +
          '    <a href = "#" NG klik = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          Kliknite tukaj za skrivanje podrobnosti." +
          '    </a>: ' +
          '    <br />' +
          '    <pre>{{retrieveLastConfigurationError() | JSON}}</pre>' +
          '    <br />' +
          '  </div>' +
          '  <div ng-show = "!doShowExpandedErrorDetails">' +
          '    <a href = "#" NG klik = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          »Kliknite tukaj, da razširite podrobnosti o napaki. « +
          '    </a>' +
          '  </div>' +
          '</div>'
    };
});

V bistvu, Sem ustvariti nov element, imenovano "generalCdlErrorHandler".  Potrebuje dostop do funkcijo imenovano retrieveLastConfigurationError in ki obravnava področje predmeta.  Imam verjetno bi lahko samo uporabljajo nadrejenega obsega, ampak to meni leni.  Če kdo misli, da bi moral narediti da, Bi radi slišali o tem v pripombah.

To je bilo vse v redu, vendar sem bil ne dobili ničesar.  Brez napak, ki izstrelil v konzoli (vsaj enkrat sem popravil vse napake sx, sem ustvaril na poti).  Preprosto nisem dobil nobenih rezultatov iz Direktive.  Šel in dodal nekaj statičnega besedila pred ng-show direktive in * si * dobil. To me mislijo, da morda direktive ni bilo dovoljeno da implicitno ustvariti nov VURS kot "doShowExpandedErrorDetails" ali "ng-init" tam. 

Sem šel nazaj v HTML, da vidim, če sem imel vrsto in ta čas WebStorm mi je pomagal.  Sem imel bil poteka v funkciji retrieveLastConfigurationError takole:

<splošno-cdl-napaka-trener retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</splošno-cdl-napaka-trener>

Ampak res je bilo to:

<splošno-cdl-napaka-trener rešitev-nazadnje-konfiguracijo-napaka = "CDLController.retrieveLastConfigurationError()">
</splošno-cdl-napaka-trener>

WebStorm je bil dovolj pameten, da veš, da je moral biti deljena.  Če to ni ta namig, Jaz bi verjetno treba še odpravljanje težav to .  Zabavno krat!

Ukana je to: ne samo direktiva element ime deljena, tako so vse atribute dodate nanj.  Ko sem dodal vezaje, vse obdelan velik.  Dan's tutorial, se je zgodilo z uporabo kratkih enotnega imena, tako da nisem, da povezave.

Upanje to pomoč nekateri.

</namen>

Naročite se na moj blog.

Sledite mi na Cvrkutati na http://www.twitter.com/pagalvin