Ich habe ein paar apps die Make-$http.get() Anrufe und ich wollte eine aufbereitete Fehlermeldung mit hässlichen Fehlerdetails versteckt zeigen können, aber zugänglich.  Im Grunde, Dies:

Und dann klickt der Benutzer auf den Fehler, Sie sehen mehr info:

Einfache Dinge.  Da genaue dieselbe potentielle Fehler in der Verwaltung Bildschirm sowie dem Endbenutzer-Bildschirm angezeigt werden können, Es fordert eindeutig eine benutzerdefinierte eckig Richtlinie.  ICH  habe das gefunden herausragende Serie der Artikel (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) durch die große Dan Wahlin.  Nach seinen Rat, Ich habe sehr schnell ein <Hallo-Welt> Richtlinie und zogen an meinen komplexer Fehler-Anzeige-Rakel. Ich habe ein paar Probleme mit dieser komplexeren Richtlinie getroffen.  Glücklich, irgendwie durch Zufall, Ich erzählte WebStorm (der Editor verwende ich in diesen Tagen) dass die JS-Datei eine eckig-Datei war und es hat mir geholfen herauszufinden, das Problem.  Dies ist der Code für die Richtlinie selbst:

Angular.Module("CDLApp").Richtlinie("GeneralCdlErrorHandler", Funktion() {

    Rückkehr {
        einschränken: "E",
        Ersetzen: wahr,

        Anwendungsbereich: {
            retrieveLastConfigurationError: "&"
        },

        Vorlage:
          '<Div Class = "Warnung Warnung-Gefahr" Rolle = "Warnung" ng-Init = "DoShowExpandedErrorDetails = True" ng-Karte = "RetrieveLastConfigurationError()">' +
          "Gab es ein i/o-Fehler oder andere Fehler.  Dies geschieht in der Regel, weil Konfigurationsdatendatei nicht sein könnte " +
          ' gefunden oder die Konfigurationsdatei enthält falschen Informationen (wie verweisen auf einer Dokumentbibliothek " +
          "das ist nicht vorhanden).' +
          '  <BR />' +
          '  <Div ng-Karte = "DoShowExpandedErrorDetails">' +
          '    <a Href = "#" ng-Klick = "DoShowExpandedErrorDetails = ! DoShowExpandedErrorDetails">' +
          "Klicken Sie hier, um Details auszublenden." +
          '    </eine>: ' +
          '    <BR />' +
          '    <Pre>{{retrieveLastConfigurationError() | JSON}}</Pre>' +
          '    <BR />' +
          '  </div>' +
          '  <Div ng-Karte = "!DoShowExpandedErrorDetails">' +
          '    <a Href = "#" ng-Klick = "DoShowExpandedErrorDetails = ! DoShowExpandedErrorDetails">' +
          "Klicken Sie hier, um ausführliche Fehlerinformationen zu erweitern." +
          '    </eine>' +
          '  </div>' +
          '</div>'
    };
});

Im Grunde, Ich erstelle ein neues Element namens "GeneralCdlErrorHandler".  Es benötigt Zugriff auf eine Funktion namens RetrieveLastConfigurationError und, in das Bereichsobjekt verarbeitet wird.  Ich hätten wahrscheinlich nur den übergeordneten Bereich, aber das fühlt sich faul.  Wenn jemand meint, dass ich das getan haben, sollten, Ich würde gerne darüber in den Kommentaren zu hören.

Dies war alles in Ordnung, aber ich war nicht immer alles.  Keine Fehler in der Konsole aufgetaucht (mindestens einmal bekam ich alle Sx-Fehler, die ich auf dem Weg erstellt).  Ich verstehe einfach keine Ausgaben, die aus der Richtlinie.  Ich ging und fügte Sie statischen Text vor der ng-Karte-Richtlinie und ich * habe * zu erhalten, die. Das machte mich glauben, dass man vielleicht die Richtlinie war nicht implizit erstellen Sie neue Vars wie "DoShowExpandedErrorDetails" oder ein "ng-Init" drin. 

Ich ging zurück in den HTML-Code zu sehen, hätte ich einen Typ und diesmal WebStorm mir geholfen.  Ich hatte in der RetrieveLastConfigurationError-Funktion wie folgt übergeben worden:

<Allgemein-Cdl-Fehler-Handler retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</Allgemein-Cdl-Fehler-handler>

Aber es wirklich notwendig, um das:

<Allgemein-Cdl-Fehler-Handler abrufen-letzte-Konfiguration-Fehler = "CDLController.retrieveLastConfigurationError()">
</Allgemein-Cdl-Fehler-handler>

WebStorm war klug genug, zu wissen, dass es getrennt werden musste.  Hätte es diesen Tipp versorgt, Ich würde wahrscheinlich noch diese Fehlerbehebung werden .  Spaß mal!

Der Trick ist dies: nicht nur ist der Richtlinie Elementnamen getrennt, So sind alle Attribute, die Sie hinzufügen.  Sobald ich die Bindestriche hinzugefügt, Sie alle wirkten groß.  Dan's Tutorial zufällig einzelne Kurznamen verwenden, Also habe nicht ich die Verbindung herstellen..

Hoffe, das jemand hilft.

</Ende>

Onnieren Sie meinen Blog ab.

Folgen Sie mir auf Twitter bei http://www.twitter.com/pagalvin

Dieses Blog Beiträge wird beschrieben, wie Sie mehrere haben können Angular.js basiert SharePoint-Webparts (verwiesen durch ein Inhalts-Editor-Webpart) auf der gleichen Seite. Ich rufe ein Inhalts-Editor-Webpart (CEWP) Das verweist JavaScript gebaut, mit dem Angular.js-Framework einen "Angular Webpart."

Angular des bootstrap-Prozess ist super einfach und gerade über jedes Beispiel finden Sie auf dem Internets geht ungefähr so:

<HTML ng-app = "MyApp">

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

</HTML>

Dieses gliedert sich, jedoch, Wenn Sie, aktivieren Sie mehrere CEWP, die mehrere kantige Webparts auf einer Seite darstellt möchten.. Angular werden nur automatisch gegen die erste ng-app-Richtlinie es Funde bootstrap – mindestens ab abgewinkelte Ausführung 1.3.6. Die Lösung ist ziemlich einfach-manuell bootstrap Code stattdessen. Die oben genannten Änderungen jetzt sowas:

<Körper>
<dIV Id =”bootstrapHere” ng-Controller =”MyController als theController”>
<bla /><bla /><bla />
</div>
</Körper>

<Script Src =”//AJAX.googleapis.com/AJAX/libs/angularjs/1.3.6/Angular.js”></Skript>

<Skript>
Angular.Bootstrap(Angular.Element(Document.getElementById(“bootstrapHere”)),["MyApp"]);
</Skript>

Im Grunde, anstelle von ng-app auf dem Element dazu Ihre bootstrapping, Sie schlagen eine ID auf dieses element. Dann, Verwenden Sie den bootstrap() Methode für eckige verarbeiten selbst das bootstrapping Steuern zur Laufzeit. Ich habe dies mit drei verschiedenen eckig Webparts auf der gleichen Seite getestet und es funktioniert einen Charme.

</Ende>

Onnieren Sie meinen Blog ab.

Folgen Sie mir auf Twitter bei http://www.twitter.com/pagalvin