In Angular: Umleiten mit $ location.path als $ http.post-Erfolgsrückruf

72

Ich versuche, einen einfachen Authentifizierungsdienst zu erstellen, indem ich einen Beitrag an eine PHP-Datei sende. Ich benötige ihn, um die Homepage teilweise auf meine zu laden, ng-viewwenn sie erfolgreich ist.

Folgendes habe ich versucht:

function loginCtrl($scope, $http, $location){
    $http.post(url,data).success(function(data){
        $location.path('/home');
    });
}

Dies führt dazu, dass sich meine URL ändert, aber ng-viewnicht aktualisiert. Es wird aktualisiert, wenn ich die Seite manuell aktualisiere.

(Routen wurden am ordnungsgemäß konfiguriert $routeProvider. Ich habe getestet, dies mit einer eigenständigen Funktion umzuleiten, die nicht als Rückruf dient, und es funktioniert.)

Ich habe auch versucht, $location.path('/home')als Funktion zu definieren und sie dann beim Rückruf aufzurufen, es funktioniert immer noch nicht.

Ich habe einige Nachforschungen angestellt und einige Artikel gefunden, die besagen, dass dies passiert, wenn ein anderes Plugin eines Drittanbieters verwendet wird. Ich lade nur angle.js

Alle Einsichten oder Hinweise auf Studienmaterial sind großartig

George Ananda Eman
quelle
was meinst du mit ng-view? Ruft $ location.path () auch intern window.location = ... auf?
Verdagon
1
Ich habe vergessen zu erwähnen, dass dies im Zusammenhang mit der Verwendung von anglejs Framework steht. - bearbeitet das oben genannte
George Ananda Eman
Interessant! Verwenden Sie Firebug oder ähnliches? Fordert Ihre App einen Teil an, wenn eine Route geändert wird?
Theotheo
Versuchen Sie, $ rootScope. $ Apply () nach dem $ location.path ('/ home') aufzurufen.
matys84pl
1
@ GeorgeAnandaEman, übrigens, haben Sie diesen Thread gesehen: stackoverflow.com/questions/11784656/… ? Ich wette "Ja", aber nur für den Fall.
Theotheo

Antworten:

83

Hier ist das changeLocation-Beispiel aus diesem Artikel http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#apply-digest-and-phase

//be sure to inject $scope and $location
var changeLocation = function(url, forceReload) {
  $scope = $scope || angular.element(document).scope();
  if(forceReload || $scope.$$phase) {
    window.location = url;
  }
  else {
    //only use this if you want to replace the history stack
    //$location.path(url).replace();

    //this this if you want to change the URL and add it to the history stack
    $location.path(url);
    $scope.$apply();
  }
};
Mark Nadig
quelle
27
Sie sollten wahrscheinlich den $ window-Dienst verwenden, anstatt das Fensterobjekt direkt zu verwenden, um Probleme beim Testen zu vermeiden. code.angularjs.org/1.1.5/docs/api/ng.$window
Justin
1
Eine einzige Antwort außerhalb der Funktion: Verwenden Sie $ window.location = url;
Joao Polo
Ich habe auch einen separaten Back History Stack geschrieben
Siddharth
app.directive ("backButton", Funktion ($ window) {return {einschränken: "A", Link: Funktion (Bereich, elem, attrs) {elem.bind ("click", function () {$ window.history. zurück(); }); } }; });
Siddharth
14

Es gibt eine einfache Antwort im offiziellen Leitfaden:

Was macht es nicht?

Es wird kein erneutes Laden der gesamten Seite verursacht, wenn die Browser-URL geändert wird. Verwenden Sie die untergeordnete API $ window.location.href, um die Seite nach dem Ändern der URL neu zu laden.

Quelle: https://docs.angularjs.org/guide/$location

0x6B6F77616C74
quelle
3

Ich mache das Folgende für die Seitenumleitung (vom Login zur Homepage). Ich muss das Benutzerobjekt auch an die Homepage übergeben. Also benutze ich Windows Localstorage.

    $http({
        url:'/login/user',
        method : 'POST',
        headers: {
            'Content-Type': 'application/json'
          },
        data: userData
    }).success(function(loginDetails){
        $scope.updLoginDetails = loginDetails;
        if($scope.updLoginDetails.successful == true)
            {
                loginDetails.custId = $scope.updLoginDetails.customerDetails.cust_ID;
                loginDetails.userName = $scope.updLoginDetails.customerDetails.cust_NM;
                window.localStorage.setItem("loginDetails", JSON.stringify(loginDetails));
                $window.location='/login/homepage';
            }
        else
        alert('No access available.');

    }).error(function(err,status){
        alert('No access available.');      
    });

Und es hat bei mir funktioniert.

user2230867
quelle
2

Anstatt zu verwenden success, ändere ich es in thenund es funktioniert.

Hier ist der Code:

lgrg.controller('login', function($scope, $window, $http) {
    $scope.loginUser = {};

    $scope.submitForm = function() {
        $scope.errorInfo = null

        $http({
            method  : 'POST',
            url     : '/login',
            headers : {'Content-Type': 'application/json'}
            data: $scope.loginUser
        }).then(function(data) {
            if (!data.status) {
                $scope.errorInfo = data.info
            } else {
                //page jump
                $window.location.href = '/admin';
            }
        });
    };
});
jcguo
quelle
1

Verwenden Sie: $ window.location.href = '/Home.html';


quelle
0

Es ist sehr einfach Code .. aber schwer zu bestrafen ..

detailsApp.controller("SchoolCtrl", function ($scope, $location) { 
      $scope.addSchool = function () {

        location.href='/ManageSchool/TeacherProfile?ID=' + $scope.TeacherID;
      }
});
Isanka Thalagala
quelle