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

Ten blog postów opisuje, jak można mieć wiele Angular.js oparciu web Part programu SharePoint (odwołanie za pośrednictwem składnika web part Edytor zawartości) na tej samej stronie. I 'm calling w składniku web part Edytor zawartości (CEWP) odwołujący JavaScript, zbudowany przy użyciu Angular.js framework "kątowe części sieci Web."

Kątowa w proces ładowania jest bardzo proste i prawie każdy przykład, znajdziesz na internets idzie coś takiego:

<HTML ng-app = "MojaAplikacja">

<bla /><bla /><bla />

</HTML>

To psuje, Jednakże, Jeśli chcesz, aby umożliwić wielu CEWP reprezentujących wiele kątowe składników web Part na tej samej stronie. Kątowa będzie tylko automatycznie bootstrap przed pierwszą dyrektywę ng-app to znajdzie – co najmniej od wersji kątowej 1.3.6. Rozwiązanie jest bardzo proste-ręcznie uruchamiania kodu zamiast. Powyżej teraz zmienia się na coś takiego:

<organ>
<dIV id =”bootstrapHere” ng kontroler =”myController jako theController”>
<bla /><bla /><bla />
</DIV>
</organ>

<skrypt src =”//AJAX.googleapis.com/AJAX/libs/angularjs/1.3.6/Angular.js”></skrypt>

<skrypt>
Angular.bootstrap(Angular.element(document.getElementById(“bootstrapHere”)),["MojaAplikacja"]);
</skrypt>

Zasadniczo, zamiast ng aplikacja na element robić swoje bootstrap, slap ID na tego elementu. Następnie, Użyj bootstrap() Metoda na skośne sam kontrolować bootstrap procesu w czasie wykonywania. Ja testowałem to z trzech różnych kątowe składników web Part na tej samej stronie i działa czar.

</koniec>

Subskrybowanie mój blog.

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