我正在学习 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 .
最佳答案
如果您使用的是 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);
});
关于javascript - Angular ,项目详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24577242/