简体   繁体   English

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

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

I have an app that directs to a custom url based on a given employeeId parameter when a particular employee is clicked on in a list. 我有一个应用程序,当在列表中单击特定员工时,该应用程序将基于给定的employeeId参数定向到自定义URL。 When the employee is clicked on, you are taken to an employee details page with their id property as a parameter, and I can display this property in the dom. 单击该员工后,您将进入一个员工详细信息页面,其id属性作为参数,我可以在dom中显示此属性。

What I'm trying to do is to display this employee object's other properties in this different state, which I've had a look around at trying to do, but can't find a solution that matches what I'm trying to do. 我想做的是在此不同状态下显示此员工对象的其他属性,我在尝试做的事四处查看,但找不到与我想做的事情相匹配的解决方案。

Example: 例:

Clicking on employee number 21101994 on employees/employeesList state directs to employees/employeeDetails/?21101994 page and displays only their data in the js fields such as {{employee.firstName}}. 在employee / employeesList状态上单击雇员编号21101994会直接指向employee / employeeDetails /?21101994页面,并仅在诸如{{employee.firstName}}之类的js字段中显示其数据。

I can successfully show the id, but I want to be able to show ALL of the data for the object that matches the employee's id. 我可以成功显示ID,但是我希望能够显示与员工ID匹配的对象的所有数据。

The url routing is working fine, and clicking on this employee on the list page directs correctly to a details page with their parameter, but I can't seem to successfully pass their data into the new state/controller. 该url路由工作正常,并且在列表页面上单击此雇员可以将其参数正确地定向到详细信息页面,但是我似乎无法成功地将其数据传递给新的状态/控制器。

- --

HTML link: HTML链接:

<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 tried 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: 员工服务:

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: 员工名单控制器:

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

    $scope.sortByAllDepartments = '+lastName';

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

The states will be receiving params like 各州将接受像

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

Or 要么

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

I prefer the second one to receive due to clarity. 由于清晰,我更喜欢第二个。

To pass all the data of employee, localstorage of employee object will be better in case you need this object frequently or in other parts in application. 为了传递员工的所有数据,员工对象的本地存储会更好,以防您经常需要此对象或应用程序中的其他部分。

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

To access this you can do 要访问此功能,您可以执行

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

In case you need to need this stored data, let's say you are navigating away from this employeeDetails state, you can delete this 如果您需要此存储的数据,例如您要离开此employeeDetails状态,则可以删除此数据

localstorage.removeitem('employeeData');

If you require passing multiple state params, just add a comma separated string 如果您需要传递多个状态参数,则只需添加一个逗号分隔的字符串

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

and then receive this in state as below 然后收到如下所示的状态

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

I hope this last makes clear as in why should you avoid passing too many params in stateParams 我希望这最后一点可以清楚地说明,为什么要避免在stateParams中传递太多参数

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM