Question

我正在学习棱角（使用离子框架，包括手机间隙），我正在尝试创建一个列出一些数据的应用程序，当您点击一个时，它会显示详细信息。我能够列出所有项目，但我无法管理如何显示单个项目的详细信息。我知道这个问题可能与$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'
        },
      }
    })

});

controllers.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);

});

人员-details.html

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

更新

链接到Plunker。

Answer 1

如果你正在使用angular-ui-router，那么你应该注入$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);
});

角度，项目细节

1 个答案: