javascript - Angular ，项目详细信息

Question

我正在学习 Angular (使用 ionic 框架，包括电话间隙)，我正在尝试创建一个列出一些数据的应用程序，当您单击一个应用程序时，它会显示其详细信息。我能够列出所有项目，但无法管理如何显示单个项目的详细信息。我知道这个问题可能与 $routeParams 有关，但我找不到问题所在。

app.js

angular.module('app', ['ionic', 'app.controllers'])

.config(function($stateProvider, $urlRouterProvider, $routeProvider) {

    .state('app.list', {
      url: '/list',
      views: {
        'menuContent' :{
          templateUrl: "templates/list.html"
        }
      }
    })

    .state('app.staff', {
      url: '/staff/:staffid',
      views: {
        'menuContent' :{
          templateUrl: "templates/staff-details.html",
          controller: 'StaffDetailsCtrl'
        },
      }
    })

});

Controller .js

.controller('FooCtrl', function($scope) {
   $scope.staff = [
       { id: 1, name: 'Jim', color: 'red' },
       { id: 2, name: 'Bob', color: 'blue' },
       { id: 3, name: 'Peter', color: 'yellow' }
       /*... etc... */
   ];
});

// Review Controller
.controller('StaffDetailsCtrl', function($scope, $routeParams) {

  // Get staff
  alert('yeeeees');
  var id = $routeParams.staffid;
  $scope.staff = $scope.staff.get(id);

});

员工详细信息.html

{{staff.id}}<br />
{{staff.name}}<br />
{{staff.color}}

更新

链接到Plunker .

Answer 1

如果您使用的是 Angular-ui-router，那么您应该注入(inject) $stateParams 而不是 $routeParams。所以你的代码将如下所示:

angular.module('app', ['ionic', 'app.controllers'])
    .config(function($stateProvider, $urlRouterProvider, $routeProvider) {

        $stateProvider
            .state('app.staff', {
                url: '/staff/:staffid',
                views: {
                    'menuContent' :{
                        templateUrl: "templates/staff-details.html",
                        controller: 'StaffDetailsCtrl'
                    },
                 }
            })
 });

// Review Controller
.controller('StaffDetailsCtrl', function($scope, $stateParams) {
     // Get staff
    alert('yeeeees');
    var id = $stateParams.staffid;
    $scope.staff = $scope.staff.get(id);
});