我正在学习有角度的(具有离子框架,包括电话间隙),并且尝试创建一个列出一些数据的应用程序,当您单击其中一个时,它会显示其详细信息。我能够列出所有项目,但无法管理如何显示单个项目的详细信息。我知道这个问题可能与问题有关,$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);
});
staff-details.html
{{staff.id}}<br />
{{staff.name}}<br />
{{staff.color}}
更新
链接到Plunker。
如果您正在使用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);
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句