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

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

这是我的登录代码。用户经过身份验证后，它可以看到所有其他用户。所以我将 View 更改为 #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;
                            })
                    }
                }
            ]
        }
    });

下面的代码负责调用电话并检索所有用户。工作正常。

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>

用户 Controller 。每次点击用户名链接时执行。

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 = 函数(routeToNavigate，routeParameter){
$location.path(“/”+routeToNavigate+“/”+routeParameter);
}
3. 将 .when("/userpage", { 更改为 .when("/userpage/:email", {

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

5. 将 $routeParams 注入(inject)到您的 UserController

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