2013-04-01 4 views
16

Ich möchte eine "Globale Funktion" aufgerufen haben, wenn ich meine AngularJS-Anwendung zum ersten Mal starte, oder jedes Mal, wenn ich die Seite aktualisiere.

Diese Funktion wird meinen Server mit $http.get() aufrufen, um globale Informationen zu erhalten, die für die Verwendung meiner Anwendung erforderlich sind. Ich muss in dieser Funktion auf $rootScope zugreifen. Danach, und nur nachdem diese Anfrage beendet ist, verwende ich app.config und $routeProvider.when(), um den guten Controller zu laden.

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/', 
     { 
      /**/ 
     }); 
}]); 

Ich möchte nicht die Anwendung etwas tun, bevor diese Aktion abgeschlossen ist. Ich denke also, ich muss eine "Entschlossenheit" anwenden, aber ich weiß nicht wirklich, wie ich sie benutzen soll.

Irgendeine Idee?

Danke!

+4

Sie können * eine HTTP-Anforderung nicht ausführen, bevor Sie Ihre 'config' Blöcke ausführen. Die 'run'-Blöcke laufen sofort * nach * den' config'-Blöcken, was der früheste Punkt ist, an dem Sie dies tun können. Außerdem sollten Sie die Daten nicht in $ rootScope, sondern in einem Dienst speichern. Warum brauchen Sie die Informationen, bevor Sie das Routing einrichten? –

+0

Ich versuche eine internationale Website zu erstellen, mehrere Sprachen. 1. Holen Sie sich Übersetzungen vom Server (Globale Funktion!) Und legen Sie diese Daten im rootScope ab (alle Übersetzungen, um zu vermeiden, dass der Benutzer jedes Mal, wenn er eine Seite wechselt, Übersetzungen lädt) Wenn Sie eine andere Idee haben, um die Liste der in einer Vorlage verwendeten Schlüsselwörter zu erhalten und dann die Übersetzung laden, nachdem die Vorlage geladen ist, kann mir das helfen.) 2. Einrichten des Routings 3. Führen Sie den Controller aus, Anzeige. – alexmngn

+1

Die Übersetzungen sollten sicher in einem Dienst sein. Es gibt Dienste dort draußen, wenn Sie etwas aus der Box wollen, wie [dieses] (https://github.com/PascalPrecht/ng-translate) - es sollte Inspiration liefern, wenn nichts anderes. Sie haben jedoch immer noch nicht geantwortet, warum Sie die Übersetzungen benötigen, bevor Sie das Routing einrichten. –

Antwort

23

Es ist nicht der beste Weg, um Ihr gegebenes Problem zu lösen, aber hier ist eine vorgeschlagene Lösung für Ihre Frage.

Alles im Inneren run(...) wird bei der Initialisierung ausgeführt.

angular.module('fooApp').run(['$http', '$rootScope' function($http, $rootScope) { 
$http.get(...).success(function(response) { 
    $rootScope.somedata = response; 
}); 

$rootScope.globalFn = function() { 
    alert('This function is available in all scopes, and views'); 
} 

}]); 

Jetzt können Sie einen Alarm in allen Ansichten ausgelöst werden, ng-click="globalFn()" verwenden.

Beachten Sie, dass die Richtlinien eine neue Isolat Rahmen mit keinen Zugriff auf diese Daten haben, wenn nicht explizit geerbt:$scope.inheritedGlobalFn = $rootScope.globalFn

+0

Dies löst das Problem nicht. Jede Ansicht, die somedata erfordert, wird höchstwahrscheinlich diese Daten vor dem asynchronen Aufruf in Ausführung benötigen, die Fehler verursachen. Das Problem liegt in der Unfähigkeit, etwas warten zu lassen, was im Lauf passiert. Was benötigt wird, ist eine universelle Lösung in AngularJS. Dies gibt es derzeit nicht, und ich habe keine saubere Lösung für dieses Problem gefunden. –

+0

In der Tat. Wenn auf allen Controllern ein Service vorhanden war, der mit dem Versprechen, das in Run ausgelöst wurde, geantwortet hat, würde das Problem behoben. Nehmen Sie sich die Zeit, um später ein gutes Beispiel zu geben! –

+0

Es gibt ein fehlendes Komma zwischen '$ rootScope'' und' function ($ http, ';) Kann nicht bearbeitet werden, weil ich mehr Zeichen benötige (Tippfehlerkorrekturen sind anscheinend bei SO nicht erwünscht) – z3ntu

3

Als ersten Schritt für Ihre Lösung, denke ich, dass Sie die $ routeChangeStart Ereignis überwachen könnte Das wird vor jeder Routenänderung (oder Seitenaktualisierung in Ihrem Fall) ausgelöst.

var app = angular.module('myApp').run(['$rootScope', function($rootScope) { 
    $rootScope.$on("$routeChangeStart", function (event, next, current) { 
     if (!$rootScope.myBooleanProperty)) { 
      $location.path('/'); 
     } 
     else { 
      $location.path('/page'); 
     } 
    }); 
}); 

Sie sollten einen Blick auf this article über Authentification auf einer einzigen Seite App haben. Ich denke du könntest etwas ähnliches machen.

0

Bitte beachten Sie diese Antwort: https://stackoverflow.com/a/27050497/1056679

Ich habe versucht, alle möglichen Methoden zur Lösung von Abhängigkeiten in globalem Bereich zu sammeln, bevor die tatsächliche Controller ausgeführt werden.

Verwandte Themen