Javascript 刷新前不加载控制器范围变量

我有一个登录控制器

myApp.controller('LoginCtrl', ['$scope', '$http','$location', function($scope, $http, $location) {
    $scope.login = function() {
        var data = JSON.stringify({user: $scope.user.id, password: $scope.user.password, type: "m.login.password"});
        $http.post("http://localhost:8008/_matrix/client/api/v1/login", data).then(function mySuccess(details){
            $http.post('/login',details.data).success(function(response){
                console.log(response);
            });
            $location.path('home');
        }, function myError(err) {
            console.log(err);
            alert("Invalid username/password")
        });
    };
}]);

还有一个家庭控制器

myApp.controller('HomeCtrl', ['$scope', '$http','$location', function($scope, $http, $location) {
    console.log("Hello World from home controller");

    var refresh = function() {
        $http.get('/roomNames').success(function(response) {
            console.log("I got the data I requested");
            $scope.roomNames = response;
        });
    }
    refresh();
}]);

如图所示，如果登录详细信息正确，LoginCtrl会将路由更改为home.html

但是，当我运行应用程序并成功登录时，HomeCtrl应该向服务器发出get请求，以获取登录用户的数据

我想要的是将这些数据作为列表加载到home.html中。这是我的家

<h3 class="subHeader"> Rooms </h3>
      <ul class="nav nav-sidebar">
        <!-- <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li> -->
        <li ng-repeat="room in roomNames"><a>{{room}}</a></li>

      </ul>

房间

{{room}

但是，成功登录后，roomNames变量最初为空。我一刷新页面，就会填充html列表

---

如何确保在home.html页面打开后立即填充列表？

尝试使用来自$http的success和error回调，最好将此功能放在工厂中

myApp.controller（'HomeCtrl'、['$scope'、'$http'、'$location'，
函数（$scope、$http、$location）{
log（“来自主控制器的Hello World”）；
var refresh=function（）{
$http.get（“/roomNames”）
.then（函数成功回调（响应）{
$scope.roomNames=响应；
}，函数errorCallback（响应）{
//如果失败，是否输出错误？
});
}
刷新（）；
}
]);这是因为，您在访问服务器之前先转到主页。因此，在主页上，您将无法获取数据，并在刷新后获取数据

只有在成功验证后才重定向到页面

myApp.controller('LoginCtrl', ['$scope', '$http','$location', function($scope, $http, $location) {
$scope.login = function() {
    var data = JSON.stringify({user: $scope.user.id, password: $scope.user.password, type: "m.login.password"});
    $http.post("http://localhost:8008/_matrix/client/api/v1/login", data).then(function mySuccess(details){
        $http.post('/login',details.data).success(function(response){
            console.log(response);
            $location.path('home'); // Redirect after success login
        })
         .catch(function(data){
           console.error("Error in login",data);
         });

    }, function myError(err) {
        console.log(err);
        alert("Invalid username/password")
    });
};
}]);

不确定，但更改$scope.roomNames=响应；到$scope。$apply（function（）{$scope.roomNames=response；}）尝试返回$http.getWhen页面首次加载时是否调用此函数？这是因为，在访问服务器之前，您将转到
主页
页面。因此，在主页上，您将无法获取数据，并在刷新后获取数据。这仍然不起作用。我认为使用服务可能是我的最佳选择！到底是什么不起作用？在
roomNames
变量中显示数据。当我单击登录按钮时，路径应更改为home.html，但这不会发生。我被困在login.html页面这意味着，您的呼叫
$http.post（'/login'，details.data）
没有成功。添加
catch
方法。