Question

您好我已经创建了一个应用程序角度，我将通过调用http get get to WS Java登录用户。我使用角度视图，在我使用工厂的视图之间传递参数。

我的代码：我创建角度模块

angular.module('contactMgr',['ngRoute'])
.controller('AppCtrl',['$scope',function ($scope){}])

.config(['$routeProvider','$locationProvider',
                 function($routeProvider,$locationProvider){

            $routeProvider.when('/',{
              controller: 'homePageCtrl',
              templateUrl: 'assets/partials/homePage.html'
            })
            .when('/login',{
              controller: 'loginCtrl',
              templateUrl: 'assets/partials/login.html'
            })
            .when('/loginError',{
              controller: 'loginErrorCtrl',
              templateUrl: 'assets/partials/loginError.html'
            });
}])

然后添加用于登录的控制器，调用WS来执行登录。如果WS响应ID i调用方法加载工厂加载用户，最后我重定向到主页

.controller('loginCtrl',['$scope','$http','$location','UserLogged',
                         function($scope,$http,$location,UserLogged){
   $scope.loginFunction = function(){
      $http({method: 'GET',
             url: 'http://localhost:8080/TaskManagerWS/login/'+$scope.lg_email+':'+$scope.lg_password
      }).then(function success(data,status,xhr){
                $scope.idUser = data.data;
                if($scope.idUser!=0){
                  UserLogged.load($scope.idUser);
                  $location.path("/");
                } 
                else{ $location.path("/loginError"); }
                },
              function error(data,status,xhr){ alert("Error on call function!"); }
            );
   };
}])

我的工厂加载用户

.factory('UserLogged',['$http',function($http){
  var userLogged;

  return{
  load: function(id){
     $http({
          method: 'GET',
          url: 'http://localhost:8080/TaskManagerWS/user/id='+id
          }).then(function success(data,status,xhr){
                  userLogged = data.data;
                },
                function error(data,status,xhr){
                  window.alert("Error on call function!");
                }
              );
  },
  get: function(){
         return userLogged;
  }
 }
}])

最后我的主页控制器

.controller('homePageCtrl',['$scope','UserLogged',function($scope,UserLogged){
     $scope.user = UserLogged.get();
}])

所有通话工作正常但是，当我重定向到主页时，我看不到结果。

我的主页只有{{user.name}}标记为“h1”。

但如果我导航导航栏并更改视图然后我返回主页标题，请参阅。

为什么会这样？我会立即加载工厂。

我认为在加载页面之前有角度然后加载工厂。出厂前有加载的指令，然后是页面吗？

我尝试在工厂中输入var userLogged一个静态字符串然后工作正常，标题立即加载。也许时间问题出现在$ http电话中。

有什么方法可以在$ http服务响应后重新加载视图？

由于

解决：

谢谢@Matthew Cawley

我更改了loginCTRL并添加了

UserLogged.loadCall($scope.idUser).then(function success(data,status,xhr){
                        UserLogged.loadFactory(data.data);
                        $location.path("/");
                      },
                      function error(data,status,xhr){
                        window.alert("Error on call function!");
                      }
                    );
            }

然后我更改工厂以在方法加载中返回$ http，最后我将方法添加到loadFactory以加载userLogged。

有一个我不喜欢的解决方案，但似乎是唯一的。

Answer 1

看起来您很快就会重定向到主页，即在UserLogged服务加载完成之前将其自己的userLogged变量设置为$http返回的数据呼叫。

这意味着当您在$scope.user = UserLogged.get();中致电homePageCtrl时，它会直接转到服务的get方法，并且不会返回任何内容（因为此时userLogged尚未返回设定）。

然后，片刻之后（没有真正注意到它）...... $http调用完成，userLogged变量设置为结果，但为时已晚。

解决方案1：返回在控制器中使用的承诺

通过添加$http关键字返回return服务创建的承诺：

load: function(id){
   return $http({
      method: 'GET',
      url: 'http://localhost:8080/TaskManagerWS/user/id='+id
   })

然后在loginCtrl中，更改：

UserLogged.load($scope.idUser);
$location.path("/");

为：

UserLogged.load($scope.idUser)
    .then(function(){
         $location.path("/");
    });

这种方式只有在UserLogged.load()方法执行后才能重定向。

解决方案2：将回调函数传递到服务（或工厂）。

在loginCtrl中创建一个执行重定向的函数：

var redirectToHome = function(){
    $location.path("/");
}

然后在服务的callback函数中添加一个额外的load()参数，并在服务中解析了promise（执行userLogged后）时执行callback函数：

load: function(id, callback) { // <---- Add extra "callback" parameter
    $http({
        method: 'GET',
        url: 'http://localhost:8080/TaskManagerWS/user/id='+id
    }).then(function success(data,status,xhr){
        userLogged = data.data;
        callback(); // <---- Execute the callback function (whatever it contains)
    },function error(data,status,xhr){
        window.alert("Error on call function!");
    });   
}

然后在loginCtrl调用服务login函数时，通过传递对redirectToHome函数的引用作为回调来执行此操作，如下所示：

UserLogged.load($scope.idUser, redirectToHome); // <--- redirectToHome becomes the callback.

AngularJS加载工厂的时间

1 个答案: