在Angular中，如何在$location.path中使用$http.post成功的回调函数进行重定向。

11 浏览
0 Comments

在Angular中，如何在$location.path中使用$http.post成功的回调函数进行重定向。

我正在尝试通过向一个php文件发送Post请求来创建一个简单的身份验证服务，当验证成功时，我希望它加载主页的部分内容到我的ng-view中。\n这是我尝试过的代码：\n

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

\n结果是我的URL改变了，但是ng-view没有更新。只有在手动刷新页面时它才会更新。\n（我已经在$routeProvider中正确配置了路由，我已经测试过将其重定向到一个独立的函数中而不是作为回调函数，它是有效的）\n我还尝试过将$location.path(\'/home\')定义为一个函数，然后在回调函数中调用它，但它仍然不起作用。\n我做了一些研究，发现一些文章说在使用另一个第三方插件时会出现这种情况，但我只加载了angular.js。\n任何见解或指向一些学习材料的指导都将非常有帮助。

0

3 答案

0 Comments

在Angular中，通过$location.path进行重定向的方法是在$http.post成功回调中使用$window.location。 上面的代码中，我们首先使用$http.post方法将用户数据发送到服务器进行验证。如果验证成功，我们将登录详情存储在本地存储中，然后通过$window.location重定向到主页。如果验证失败，我们会收到一个错误提示。

问题的原因是需要在登录成功后将用户对象传递到主页，并且需要进行页面重定向。解决方法是使用$window.location进行重定向，并在重定向前将登录详情存储在本地存储中。

以下是解决问题的代码：

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

通过以上代码，我们可以在登录成功后将用户详情存储在本地存储中，并使用$window.location进行页面重定向。

0
0 Comments

问题的原因是在Angular中使用`$location.path`进行重定向时，页面不会刷新，这与官方文档中的说明不一致。官方文档中提到，`$location.path`不会在改变浏览器URL时导致整个页面刷新，如果要在改变URL后刷新页面，需要使用更底层的API`$window.location.href`。

解决方法是使用`$window.location.href`来替代`$location.path`进行重定向。通过在`$http.post`的成功回调函数中使用`$window.location.href`，可以实现在发送POST请求成功后实现页面重定向。

以下是示例代码：

$http.post('/api/myEndpoint', data)
  .then(function(response) {
    // 请求成功后的处理逻辑
    $window.location.href = '/success-page';
  });

通过以上方法，可以在Angular中实现根据POST请求的成功与否进行页面重定向的功能。

0
0 Comments

问题的出现原因是在Angular中，当使用$http.post请求成功后，想要使用$location.path进行重定向时，会出现问题。这是因为在成功回调函数中，$scope.$apply()方法被调用，但是此时$location.path方法还没有生效，导致重定向失败。

解决方法是在成功回调函数中，使用$timeout函数将$location.path方法延迟执行。这样可以确保$location.path方法在$scope.$apply()之后执行，从而成功实现重定向。

以下是解决方法的代码示例：

$http.post('/api/example', data).then(function(response) {
  // 请求成功后的回调函数
  $timeout(function() {
    $location.path('/success');
  });
}, function(error) {
  // 请求失败后的回调函数
  $timeout(function() {
    $location.path('/error');
  });
});

通过以上方法，可以在$http.post请求成功后，使用$location.path进行重定向，并确保重定向操作的成功执行。

0