Minulla on pari apps että ehtiä $http.get() puhelut ja halusi näyttää kauniisti muotoillun virhesanoman ruma virhe tiedot piilossa, mutta saatavilla.  Pohjimmiltaan, Tämä:

Ja sitten jos käyttäjä napsauttaa virhe, he näkevät lisätietoja:

Simple kamaa.  Koska täsmälleen sama mahdollinen virhe voi esiintyä hallinto näyttö sekä käyttäjä-näyttö, se vaati selvästi mukautettu kulma direktiivin.  I  Löysin tämän erinomainen sarja artikkeleita (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) suuri kiitos Dan WÃ¥hlin.  Jälkeen hänen neuvoja, Loin hyvin nopeasti <Hello-maailma> direktiivi ja muutti edelleen monimutkaisempi virhe näytön lastalla. Törmäsin vähän ongelmia tämän monimutkaisempi direktiivin.  Onneksi, tavallaan sattumalta, Olin kertonut WebStorm (toimittaja käytän nykyään) JS-tiedoston oli kulmikas tiedosto ja se auttoi minua selvittää ongelman.  Tämä on koodi itse direktiivin:

angular.Module("CDLApp").direktiivin("generalCdlErrorHandler", funktio() {

    paluu {
        rajoittaa: "E",
        korvaa: tosi,

        soveltamisala: {
            retrieveLastConfigurationError: "&"
        },

        malli:
          '<div class = "varoittaa hälytys-vaara" rooli = "varoittaa" ng-init = "doShowExpandedErrorDetails = true" ng-show = "retrieveLastConfigurationError()">' +
          "I/o-virhe tai muu virhe.  Tämä tapahtuu yleensä siksi configuration tiedosto ei voitu " +
          "löytyy tai määritystiedosto sisältää virheellistä tietoa (kuten vertailemalla asiakirjakirjastoon " +
          "ei ole).' +
          '  <br />' +
          '  <div ng-show = "doShowExpandedErrorDetails">' +
          '    <href = "#" ng-click = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Piilota tiedot napsauttamalla tätä." +
          '    </a>: ' +
          '    <br />' +
          '    <Pre>{{retrieveLastConfigurationError() | JSON}}</Pre>' +
          '    <br />' +
          '  </div>' +
          '  <div ng-show = "!doShowExpandedErrorDetails">' +
          '    <href = "#" ng-click = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          "Napsauttamalla tätä voit laajentaa virhetiedot." +
          '    </a>' +
          '  </div>' +
          '</div>'
    };
});

Pohjimmiltaan, Olen luomassa uutta elementtiä kutsutaan "generalCdlErrorHandler".  Se on toiminto nimeltä retrieveLastConfigurationError ja jotka käsitellään soveltamisala-objektiin.  Olisin luultavasti voinut vain käyttää vanhempien soveltamisala, mutta se tuntuu laiska.  Jos joku ajattelee, olen tehnyt sen, Olisi kiva kuulla sen kommentteja.

Tämä kaikki oli hyvin, mutta en ollut saada mitään.  Ei virheitä konsoli ilmestyi (vähintään kerran korjasin kaikki sx virheet loin matkan varrella).  En vain saanut mitään tulostetta direktiivistä.  Menin ja lisätty staattista tekstiä ennen ng-show direktiivissä ja * teki * tuohon. Tämä sai minut ajattelemaan, että ehkä direktiivin saanut epäsuorasti luoda uusi vars kuten "doShowExpandedErrorDetails" tai "ng-init" siellä. 

Menin takaisin nähdä, jos olisin tyyppi ja tällä kertaa WebStorm apulainen we rikki html.  Oli ohi tältä retrieveLastConfigurationError-toiminto:

<yleinen-cdl-virheenkäsittelijä retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</yleinen-cdl-virheenkäsittely>

Mutta se todella tarvitaan, jotta tämä:

<yleinen-cdl-virheenkäsittelijä Hae-viimeinen-kokoonpano-virhe = "CDLController.retrieveLastConfigurationError()">
</yleinen-cdl-virheenkäsittely>

WebStorm oli fiksu tietää, että se piti olla yhdysmerkkiä.  Jos se ei ollut toimittanut tämä vihje, Minulla luultavasti olla vielä vianmääritys tämä .  Fun kertaa!

Temppu on: paitsi direktiivin elementtinimi on asetettu, siis kaikki ominaisuudet, voit lisätä siihen.  Kun lisäsin tavuviivoja, Kaikki toimi hyvin.  Danin opetusohjelma sattui käyttämään lyhyt yhden nimiä, joten en tee yhteys.

Toivottavasti tämä auttaa jotakuta.

</loppu>

Tilaa blogiin.

Noudata minut viserrys http://www.twitter.com/pagalvin