I'm trying to build my first angular application (using some dummy data). I have a partial which renders a list of users, and a partial to view details about an individual user. The routing to the individual user is based on id. My problem is that when I click on an individual user, that users id is not passed into the url. Can anyone tell me how to do this?
我正在尝试构建我的第一个角度应用程序(使用一些虚拟数据)。我有一个部分呈现用户列表,部分查看有关单个用户的详细信息。到单个用户的路由基于id。我的问题是,当我点击单个用户时,该用户ID不会传递到该URL。谁能告诉我怎么做?
app.js
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('App', [
'ngRoute',
'App.filters',
'App.services',
'App.directives',
'App.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UsersCtrl'}).
when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
when('/users/:userId', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).
when('/users/:userId/edit', {templateUrl: 'partials/users/user-edit.html', controller: 'UserEditCtrl'}).
otherwise({redirectTo: '/home'});
}]);
controllers.js:
controllers.js:
'use strict';
/* Controllers */
angular.module('App.controllers', []).
controller('UsersCtrl', [function() {
}])
.controller('UserDetailCtrl', [function() {
}])
.controller('UserEditCtrl', [function() {
}])
.controller('UserNewCtrl', [function() {
}]);
user-list.html
用户list.html
<body ng-controller="UserListCtrl">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
<ul class="list-group">
<h4>Users</h4>
<div ng-init="users = [
{id: 1, firstName:'John', lastName: 'Doe', email: 'johnd@gmail.com'},
{id: 3, firstName:'Jane', lastName: 'Doe', email: 'janed@gmail.com'},
{id: 4, firstName:'Donald', lastName: 'Duck', email: 'dd@disney.com'},
{id: 2, firstName:'Mary', lastName: 'Smith', email: 'ms@smiths.com'}
]">
<li class="list-group-item" ng-repeat="user in users">
<a href="#/users/:userId">{{user.firstName}} {{user.lastName}}</a>
</li>
</ul>
</div>
</div>
</div>
</body>
1 个解决方案
#1
8
Inject $routeParams. This service allows you to get any parameter passed in the controller.
注入$ routeParams。此服务允许您获取控制器中传递的任何参数。
.controller('UserDetailCtrl', function($scope, $http, $routeParams) {
var userId = $routeParams.userId;
// your code here.
});
or
要么
.controller('UserDetailCtrl', ['$scope', '$http', '$routeParams', function(scope, http, routeParams) {
var userId = routeParams.userId;
// your code here.
}]);
的jsfiddle
#1
8
Inject $routeParams. This service allows you to get any parameter passed in the controller.
注入$ routeParams。此服务允许您获取控制器中传递的任何参数。
.controller('UserDetailCtrl', function($scope, $http, $routeParams) {
var userId = $routeParams.userId;
// your code here.
});
or
要么
.controller('UserDetailCtrl', ['$scope', '$http', '$routeParams', function(scope, http, routeParams) {
var userId = routeParams.userId;
// your code here.
}]);
的jsfiddle