AngularJS $stateParams - 数据不在状态之间传递

Question

我正在使用 $stateParams 和 Angular ui-router 在单击员工列表中的员工时将 json 对象的 id 属性传递给 url，以便他们的数据显示在员工详细信息页面中。

url 路由似乎正在工作，因为员工 id 已成功显示在 url 中，但数据没有从员工列表传递到员工详细信息状态。员工存储在控制器“employeesListController”中的json对象中，处于“employees/employeesList”状态，我需要单击员工的详细信息以“employees/employeeDetails”状态显示在控制器“employeeDetailsController”中。

我得到的 url 扩展示例（因此路由正确）：/employees/employeeDetails/21101994。

我查看了 $state.go，但无法理解如何将它实现到这段代码中，因为我找不到一个全面的实际示例。

州：

.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',
    controller: ('employeesDetailsController', ['$scope', '$stateParams', function($scope, $stateParams) {
        $scope.employeeId = $stateParams.employeeId;
    }])
})

-

'employeesListController'：

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

$scope.sortByAllDepartments = '+lastName';

var employees = [
    {
        id: '21101994',
        firstName: 'Employee',
        lastName: 'One'
    },
    {
        id: '22071958',
        firstName: 'Employee',
        lastName: 'Two'
    },
];

$scope.employees = employees;
})

-

HTML 包括。 ui-sref 链接：

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

        <div>

            <p data-ng-show="employee.firstName || employee.lastName" class="title">{{employee.firstName}} {{employee.lastName}}</p>

            <p data-ng-show="!employee.firstName" class="title">(No Data)</p>

            <p data-ng-show="!employee.lastName" class="title">(No Data)</p>

etc......

Answer 1

employees/employeeDetails 的控制器声明错误。应该是这样的：

.state('employees/employeeDetails', {
    url: '/employees/employeeDetails/:employeeId',
    templateUrl: 'pages/employees/employeeDetails.html',
    controller:  function($scope, $stateParams) {
        $scope.employeeId = $stateParams.employeeId;
    })
})

如果你需要一个命名控制器，你可以通过创建一个新的控制器来实现：

app.controller('employeeDetailsController', function($scope, $stateParams) {
        $scope.employeeId = $stateParams.employeeId;
})

在你的状态配置中：

.state('employees/employeeDetails', {
    url: '/employees/employeeDetails/:employeeId',
    templateUrl: 'pages/employees/employeeDetails.html',
    controller: 'employeeDetailsController
})

Official Documentation