I have a unique application that directs to a custom URL based on a specific employee ID parameter when an individual employee is clicked in a list. Upon clicking the employee, users are redirected to a detailed employee page with their ID property as a parameter, allowing me to display this property in the DOM.
My goal is to extend this functionality to display all other properties of the employee object in this separate state. While I've explored various solutions, none seem to align with what I'm attempting to achieve.
For instance:
If you click on employee number 21101994 while on the employees/employeesList state, it redirects you to the employees/employeeDetails/?21101994 page and only displays their data in JavaScript fields such as {{employee.firstName}}.
Although I can successfully showcase the ID, my aim is to exhibit ALL the data related to the corresponding employee's ID.
The URL routing functions correctly, directing users from the list page to the details page with the appropriate parameter. However, I struggle to effectively pass the data into the new state or controller.
-
HTML snippet for linking employees:
<li class="collection-item col-xs-12" data-ng-repeat="employee in employees | orderBy: sortByAllDepartments | filter:searchAllDepartments">
<a ui-sref="employees/employeeDetails({employeeId: employee.id})" class="employeeLink"></a>
-
What I've attempted with the states:
.state('employees/employeesList', {
url: '/employees/employeesList',
templateUrl: 'pages/employees/employeesList.html',
controller: 'employeesListController'
})
.state('employees/employeeDetails', {
url: '/employees/employeeDetails/:employeeId',
templateUrl: 'pages/employees/employeeDetails.html',
resolve: {
employeeId: function($stateParams) {
return $stateParams.employeeId;
}
},
controller: function(employeeId) {
console.log(employeeId)
}
})
-
Employees service information:
app.service('employeesService', function() {
var employees = [
{
id: '21101994',
firstName: 'Employee',
lastName: 'One'
}
];
var addEmployee = function(newObj) {
employees.push(newObj);
};
var getEmployees = function() {
return employees;
}
return {
addEmployee: addEmployee,
getEmployees: getEmployees
}
})
-
Employees List Controller setup:
app.controller('employeesListController', function($scope, $stateParams, employeesService) {
$scope.active = 'active';
$scope.sortByAllDepartments = '+lastName';
$scope.employees = employeesService.getEmployees();
})