AngularJS UI-Router / $stateParams - 根据对象ID获取数据

Question

我有一个应用程序，当在列表中单击特定员工时，它会根据给定的 employeeId 参数定向到自定义 url。当点击该员工时，您将被带到一个员工详细信息页面，其 id 属性作为参数，我可以在 dom.

中显示此属性

我想做的是在这个不同的状态下显示这个员工对象的其他属性，我已经四处看看试图做的，但找不到与我的相匹配的解决方案'我正在努力。

示例：

点击 employees/employeesList 州的员工编号 21101994 会定向到 employees/employeeDetails/?21101994 页面，并仅在 js 字段中显示他们的数据，例如 {{employee.firstName}}。

我可以成功显示 ID，但我希望能够显示与员工 ID 匹配的对象的所有数据。

url 路由工作正常，在列表页面上单击此员工会使用他们的参数正确定向到详细信息页面，但我似乎无法成功将他们的数据传递到新的 state/controller.

-

HTML link:

<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>

-

我尝试过的状态：

.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)
        }
    })

-

员工服务：

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

-

员工名单管理员：

app.controller('employeesListController', function($scope, $stateParams, employeesService) {
    $scope.active = 'active';

    $scope.sortByAllDepartments = '+lastName';

    $scope.employees = employeesService.getEmployees();
})

Answer 1

各州将接收类似

的参数

 url: '/employees/employeeDetails/{:employeeId}',

或

url: '',
params: {
  employeeId: null
},
resolve: {...}

由于清晰度，我更喜欢接收第二个。

为了传递员工的所有数据，员工对象的本地存储会更好，以防你经常需要这个对象或者在应用程序的其他部分。

localStorage.setItem('employeeData', JSON.stringify(empData));

要访问此内容，您可以执行

let empData = JSON.parse(localstorage.employeeData); //Object

如果您需要此存储的数据，假设您正在离开此 employeeDetails 状态，则可以删除此

localstorage.removeitem('employeeData');

如果您需要传递多个状态参数，只需添加一个逗号分隔的字符串

ui-sref="employeeDetails({id: emp_id, name: emp_name, mobile: emp_mobile})"

然后在下面的状态下接收这个

params: {
  employeeId: null,
  employeeName: null,
  employeeMobile: null
},

我希望这最后一点能说明为什么你应该避免在 stateParams 中传递太多参数

AngularJS UI-Router / $stateParams - 根据对象ID获取数据

AngularJS UI-Router / $stateParams - Get data based on object ID

javascript

angularjs

angular-ui-router