Javascript 从服务器角度加载数据，并在单独页面上显示信息

我有一个显示所有用户名的页面。现在我想单击其中一个用户名，调用服务器来检索更多信息，并将其显示在单独的用户页面上。（名、姓等）

我的问题是，当我点击用户名页面打开，但字段并没有填充。你能检查一下我的代码，并指出我在那里做错了什么吗

app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl : "pages/login_page.html"
        })
        .when("/userpage", {
            controller : 'UserController',
            templateUrl : "pages/user_page.html"
        })
        .when("/allusers", {
            controller : 'AllUserController',
            templateUrl : "pages/all_users.html"
        });
});

这是我的登录码。经过用户身份验证后，它可以看到所有其他用户。因此，我将视图更改为

#alluser

app.directive("loginForm", function (AuthorizedHttp, ConfigurationRepository, UserObj) {
        return {
            restrict: 'E',
            scope: {
            },
            templateUrl: 'templates/login-template.html',
            replace: 'true',
            controller: ['$scope', '$http', '$window',
                function($scope, $location, $window) {
                    $scope.loginError = false;
                    $scope.login = function () {
                        $scope.loginError = false;
                        UserObj.setState(null, null, $scope.username, $scope.password, null);
                        AuthorizedHttp.get('http://{0}/account/user/login'.format(ConfigurationRepository.getBackendHostName()))
                            .success(function (response) {
                                UserObj.setState(response.first_name, response.last_name, response.email, $scope.password, response.role, response.timezones);
                                $window.location = "#allusers";
                            })
                            .error(function (err, status) {
                                $scope.username = '';
                                $scope.password = '';
                                $scope.loginError = true;
                            })
                    }
                }
            ]
        }
    });

下面的代码负责拨打电话并检索所有用户。很好

app.controller('AllUserController', function ($scope, AuthorizedHttp, ConfigurationRepository, UserObj, UserCurrent, TimezoneService) {

    $scope.init = function () {
        TimezoneService.getAllUsers()
            .success(function (response) {
                $scope.users_emails = response.map(function (item) {return item.email})
            })
            .error(function (err, status) {
                alert('Error loading all users ')
            });
    };

});

HTML以显示所有用户名。还可以设置ng click以传递用户名作为参数来检索所需的用户

<div ng-controller="AllUserController"  ng-init="init()">
    <div ng-controller="UserController">
        <div ng-repeat="email in users_emails" class="item-unchecked">
            <a ng-click="getUser(email)">{{email}}</a>
        </div>
    </div>
</div>

因此，将加载user_page.html，但未设置所有字段。我不明白为什么，因为我正在更改

$window.location

之前设置范围值

从HTML中删除

ng controller=“UserController”

在AllUserController中创建这样的函数

$scope.customNavigate=函数（routeToNavigate，routeParameter）{
$location.path（“/”+routeToNavigate+“/”+routeParameter）；
}

将

。当（“/userpage”，{

更改为

。当（“/userpage/：email”，{

将

ng click=“getUser（email）”

更改为

ng click=“customNavigate（“userpage”，email）”

将

$routeParams

注入您的用户控制器

将

$scope.getUser=函数（用户名）{

更改为

函数getUser（用户名）{

在UserController中调用

getUser（$routeParams.email）

---

#userpage

是否也使用

UserController

？您能提供一个plnkr吗？它可以工作，谢谢！但是它在数据到达之前加载页面，并延迟填充所有字段。在收到响应或处理响应之前防止页面加载的好模式是什么？有一个称为“resolve”的关键字为此，您应该在您希望延迟到数据到达的路由中使用它。这些链接将帮助您。顺便说一下，我强烈建议您使用ui路由器而不是ngRouter。它更灵活。

app.controller('UserController', function ($scope, AuthorizedHttp, ConfigurationRepository, UserObj, UserCurrent, TimezoneService,  $window) {
$scope.user_display_name = 'Now set yet';

$scope.getUser = function(username) {
    TimezoneService.getUser(username)
        .then(function (response) {
            $scope.required_user = response.data;
            $scope.user_display_name = '{0} ({1})'.format(response.data.first_name, response.data.email);
            $scope.user_timezones = response.data.timezones.map(function (item) {
                return item.timezone_name
            });
            $scope.user_role = response.data.role;
            $window.location = '#userpage';
        });
};

});