传递ID写入网址为angular.js个人看法 [英] Passing id into url for individual view in angular.js
本文介绍了传递ID写入网址为angular.js个人看法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图建立我的第一个角的应用程序（使用一些虚拟数据）。我有一个局部这使得用户的列表，和部分了解个别用户的信息。路由到各个用户是基于标识。我的问题是，当我点击个人用户，用户ID不会传递到URL。谁能告诉我如何做到这一点？
app.js
使用严格的;
//声明取决于过滤器和服务应用级模块
angular.module（'应用'，[
ngRoute'，
App.filters'，
App.services'，
App.directives'，
App.controllers
]）。
配置（['$ routeProvider'，函数（$ routeProvider）{
$ routeProvider。
当（'/用户'，{templateUrl：'谐音/用户/用户list.html'，控制器：'UsersCtrl'}）。
当（'/用户/新'，{templateUrl：'谐音/用户/用户new.html'，控制器：'UserNewCtrl'}）。
当（'/用户/：用户id'，{templateUrl：'谐音/用户/用户detail.html'，控制器：'UserDetailCtrl'}）。
当（'/用户/：用户名/编辑'，{templateUrl：'谐音/用户/用户edit.html'，控制器：'UserEditCtrl'}）。 否则（{redirectTo：'/家'}）;
}]）;
controllers.js：
使用严格的;/ * *控制器/angular.module（'App.controllers'，[]）。
控制器（'UsersCtrl'，[功能（）{ }]）
.controller（'UserDetailCtrl'，[功能（）{ }]）
.controller（'UserEditCtrl'，[功能（）{ }]）
.controller（'UserNewCtrl'，[功能（）{ }]）;
用户list.html
＆LT;机身NG控制器=UserListCtrl＆GT; ＆LT; DIV CLASS =集装箱液＆GT;
＆LT; DIV CLASS =排液＆GT;
＆LT; DIV CLASS =SPAN2＆GT;
＆LT;！ - 侧边栏的内容 - ＆GT; ＆LT; / DIV＆GT;
＆LT; DIV CLASS =span10＆GT;
＆LT;！ - 正文内容 - ＆GT; ＆LT; UL类=列表组＆GT;
＆LT; H4＆GT;用户＆LT; / H4＆GT; ＆LT; DIV NG-的init =用户= [
{ID：1，姓：'约翰'，名字：'李四'，电子邮件：johnd@gmail.com}，
{ID：3，姓：'简'，名字：'李四'，电子邮件：janed@gmail.com}，
{ID：4，姓：唐纳德，名字：'鸭'，电子邮件：dd@disney.com}，
{ID：2，姓：'玛丽'，名字：史密斯的电子邮件：ms@smiths.com'}
]＆GT; ＆LT;李班=列表组项NG重复=用户用户＆GT;
＆LT; A HREF =＃/用户/：用户id＆GT; {{user.firstName}} {{user.lastName}}＆LT; / A＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; /身体GT;
解决方案
注入的 $ routeParams 。这项服务可以让你得到任何参数传递在控制器中。
.controller（'UserDetailCtrl'，函数（$范围，$ HTTP，$ routeParams）{
VAR用户id = $ routeParams.userId;
//你的code在这里。
}）;
或
.controller（'UserDetailCtrl'，['$范围，$ HTTP，$ routeParams'功能（范围，HTTP，routeParams）{
VAR用户id = routeParams.userId;
//你的code在这里。
}]）;
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?
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:
'use strict';
/* Controllers */
angular.module('App.controllers', []).
controller('UsersCtrl', [function() {
}])
.controller('UserDetailCtrl', [function() {
}])
.controller('UserEditCtrl', [function() {
}])
.controller('UserNewCtrl', [function() {
}]);
user-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>
解决方案
Inject $routeParams. This service allows you to get any parameter passed in the controller.
.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.
}]);
这篇关于传递ID写入网址为angular.js个人看法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
