web-dev-qa-db-ja.com

Angularでは、$ location.pathを$ http.post成功コールバックとしてリダイレクトする方法

Postをphpファイルに送信して簡単な認証サービスを作成しようとしていますが、成功したときにng-viewにパーシャルホームページを読み込む必要があります。

これは私が試したものです：

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

URLが変更されますが、ng-viewは更新されません。ページを手動で更新すると更新されます。

（ルートは$routeProviderで適切に設定されています。コールバックとしてではなくスタンドアロン関数でこれをリダイレクトすることをテストしましたが、動作します）

また、$location.path('/home')を関数として定義してから、コールバックで呼び出すと、まだ機能しません。

私はいくつかの研究を行い、別のサードパーティのプラグインを使用するとこれが起こることを述べている記事を見つけました、私はangular.jsをロードしています

学習資料への洞察や指針は素晴らしいでしょう

javascriptmodel-view-controllerangularjs
72
George Ananda Eman

この記事のchangeLocationの例は次のとおりです 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();
  }
};
82
Mark Nadig

公式ガイドには簡単な答えがあります：

それは何をしないのですか？

ブラウザのURLが変更されても、ページ全体がリロードされることはありません。 URLを変更した後にページをリロードするには、低レベルAPI、$ window.location.hrefを使用します。

ソース： https://docs.angularjs.org/guide/$location

14
0x6B6F77616C74

ページのリダイレクト（ログインからホームページへ）のために以下を行っています。ユーザーオブジェクトをホームページにも渡す必要があります。だから、私はWindowsのローカルストレージを使用しています。

    $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.');      
    });

そしてそれは私のために働いた。

3
user2230867

successを使用する代わりに、thenに変更すると動作します。

コードは次のとおりです。

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';
            }
        });
    };
});
2
jcguo

使用：$ window.location.href = '/Home.html';

1
user2136053

それは非常に簡単なコードです..見つけるのは難しいです..

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

        location.href='/ManageSchool/TeacherProfile?ID=' + $scope.TeacherID;
      }
});
0
isanka thalagala