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

Question

我有一个登录控制器

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 应该向服务器发出获取登录用户数据的请求。

我想要的是将这些数据作为列表加载到 home.html 中。这是我的 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>

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

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

Answer 1

尝试使用 $http 中的成功和错误回调，最好将此功能放入工厂中

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

    var refresh = function() {
      $http.get('/roomNames')
        .then(function successCallback(response) {
          $scope.roomNames = response;
        }, function errorCallback(response) {
          //output an error if failed?
        });
    }
    refresh();
  }
]);

Answer 2

这是因为，您在访问服务器之前先转到主页。因此，在首页，你不会获取数据，刷新后获取。

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

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")
    });
};
}]);