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

Tässä blogissa virkaa kuvataan, miten voit olla useita Angular.js perustuvat SharePoint-osa (viitatun sisällön muokkaus-web-osan kautta) samalla sivulla. Pyydän sisällön muokkaus-web-osan (CEWP) joka viittaa ohjelman rakennettu Angular.js yhteydessä "kulmikas-Web-osasta.

Kulmikas n alkulatauksen on super helppoa ja vain noin joka esimerkki löydät internets menee jotain tällaista:

<HTML ng-app = "myApp">

<blaa /><blaa /><blaa />

</HTML>

Tämä murtaa, kuitenkin, Jos haluat ottaa käyttöön useita CEWP edustavat useita kulmikas web-osia samalla sivulla. Kulmikas automaattisesti bootstrap ensimmäinen ng-app direktiiviä vastaan sitä löytää – ainakin kulmikas versiosta 1.3.6. Ratkaisu on hieno herkkäuskoinen – manuaalisesti bootstrap koodi sen sijaan. Edellä nyt muuttuu jotain tällaista:

<kehon>
<dIV id =”bootstrapHere” ng-controller =”myController kuin theController”>
<blaa /><blaa /><blaa />
</div>
</kehon>

<Script src =”//Ajax.googleapis.com/Ajax/libs/angularjs/1.3.6/angular.js”></Script>

<Script>
angular.bootstrap(angular.Element(document.getElementById(“bootstrapHere”)),["myApp"]);
</Script>

Pohjimmiltaan, sen sijaan, että ng-app elementin tehdä oman näytönohjaimen, lämmintä kättä päälle elementin tunnus. Sitten, käyttää bootstrap() menetelmä kulmikas itse hallita bootstrapping prosessin suorituksen aikana. Olen testannut tätä kolme eri kulmikas web-osaa samalla sivulla ja se toimii viehätys.

</loppu>

Tilaa blogiin.

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