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

Question

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

我的问题是，当我单击用户名页面打开时，但未填充字段。您能否检查我的代码并建议我在那里做错了什么？

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

这是我的登录代码。用户认证后，它可以看到所有其他用户。所以我将视图更改为#allusers

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

下面的代码负责拨打电话并检索所有users。工作正常。

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>

用户控制器。每次单击用户名链接时执行。

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

});

结果 user_page.html 已加载，但未设置所有字段。我不明白为什么，因为我在更改$window.location 之前设置了范围值。

Answer 1

1. 从您的 HTML 中删除 ng-controller="UserController"
2. 在你的 AllUserController 中创建一个函数，就像 $scope.customNavigate = function(routeToNavigate, routeParameter){ $location.path("/" + routeToNavigate + "/" + routeParameter); }
3. 将.when("/userpage", { 更改为.when("/userpage/:email", {

4. 将ng-click="getUser(email)" 更改为ng-click="customNavigate("userpage", email)"

5. 将$routeParams 注入您的用户控制器

6. 将$scope.getUser = function(username) { 更改为function getUser (username) {
7. 在您的 UserController 中调用 getUser($routeParams.email)。