AngularJS UI-Router / $ stateParams-根據對象ID獲取數據

Question

我有一個應用程序，當在列表中單擊特定員工時，該應用程序將基於給定的employeeId參數定向到自定義URL。 單擊該員工后，您將進入一個員工詳細信息頁面，其id屬性作為參數，我可以在dom中顯示此屬性。

我想做的是在此不同狀態下顯示此員工對象的其他屬性，我在嘗試做的事四處查看，但找不到與我想做的事情相匹配的解決方案。

例：

在employee / employeesList狀態上單擊雇員編號21101994會直接指向employee / employeeDetails /？21101994頁面，並僅在諸如{{employee.firstName}}之類的js字段中顯示其數據。

我可以成功顯示ID，但是我希望能夠顯示與員工ID匹配的對象的所有數據。

該url路由工作正常，並且在列表頁面上單擊此雇員可以將其參數正確地定向到詳細信息頁面，但是我似乎無法成功地將其數據傳遞給新的狀態/控制器。

--

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>

--

我嘗試過的州：

.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中傳遞太多參數