Angular load data from server and display information on separate page

Question

I have a page where I display all usernames. Now I want to click on one of these usernames make a call to server to retrieve more information and display it on separate User page. (First name, last name, etc)

My problem is that when I click on username page opens but fields are not populated. Could you please review my code and suggest what I am doing wrong there?

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

This is my login code. After user authenticated it can see all other users. So I am changing view to #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;
                            })
                    }
                }
            ]
        }
    });

Code below responsible to make a call and retrieve all users. Works fine.

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 to display all usernames. Also set ng-click to pass a username as parameter to retrieve required user.

<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 controller. Executed every time I click on username link.

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

});

As a result user_page.html is loaded but all fields are not set. I don't understand why since I am setting a scope value before I change a $window.location.

Answer 1

1. Remove ng-controller="UserController" from your HTML
2. Create a function in your AllUserController like that $scope.customNavigate = function(routeToNavigate, routeParameter){ $location.path("/" + routeToNavigate + "/" + routeParameter); }
3. Change .when("/userpage", { to .when("/userpage/:email", {

4. Change ng-click="getUser(email)" to ng-click="customNavigate("userpage", email)"

5. Inject $routeParams to your UserController

6. Change $scope.getUser = function(username) { to function getUser (username) {
7. Call getUser($routeParams.email) in your UserController.