Question

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

网址路由似乎正常工作，因为员工ID已成功显示在网址中，但数据未从员工列表传递到员工详细信息状态。员工存储在控制器＆＃39; employeesListController＆＃39;内的json对象中，员工/员工列表＆＃39;状态，我需要点击员工的详细信息显示在＆＃39; employeeDetailsController＆＃39; employees / employeeDetails＆＃39;状态。

我正在获取的网址扩展示例（因此它正确路由）：/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;
    }])
})

-

＆＃39; employeesListController＆＃39;：

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

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

1 个答案: