Question

我正在尝试构建我的第一个角度应用程序（使用一些虚拟数据）。我有一个部分用于呈现用户列表，而部分用于查看有关单个用户的详细信息。到单个用户的路由基于id。我的问题是，当我点击单个用户时，该用户ID不会传递到该URL。谁能告诉我怎么做？

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() {

  }]);

用户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>

Answer 1

注入 $ routeParams 。此服务允许您获取控制器中传递的任何参数。

.controller('UserDetailCtrl', function($scope, $http, $routeParams) {
        var userId = $routeParams.userId;
        // your code here.
});

或

.controller('UserDetailCtrl', ['$scope', '$http', '$routeParams', function(scope, http, routeParams) {
        var userId = routeParams.userId;
        // your code here.
}]);

JSFiddle

将id传递给url以获取angular.js中的单个视图

1 个答案: