Angular $routeParams 返回空对象答案

【问题标题】：Angular $routeParams returns empty objectAngular $routeParams 返回空对象
【发布时间】：2013-03-14 03:30:00
【问题描述】：

我在一个我无法看透的问题上被困了大约一天。

我在 users.js.coffee 文件中有以下代码：

app = angular.module("app", ["ngResource"])
app.config ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
  $locationProvider.html5Mode(true)
  $routeProvider.when('/users/:id', {templateUrl: '/users/:id.json', controller: UserCtrl})
  $routeProvider.when('/users/:id/videos', {templateUrl: '/users/:id/videos.json', controller: UserCtrl})
]

app.factory "User", ["$resource", ($resource) ->
  $resource("/users/:id", {id: "@id"}, {
    show: {method: "GET"}, 
    videos: {method: "GET", isArray:true}
    })
]

@UserCtrl = ["$scope", "$location", "$route", "http", "$routeParams", "User", ($scope, $location, $route, $http, $routeParams, User) ->
  console.log($location)//LocationUrl {$$parse: function, $$compose: function, $$rewriteAppUrl: function, $$protocol: "http", $$host: "localhost"…}

  console.log($route)//Object {routes: Object, reload: function}
  console.log($routeParams)//Object {} 

]

为什么 $routeParams 会是一个空对象？如果我在视图中调用 $route.current.params，它会显示适当的参数。但不在控制器中。更重要的是，我不能在控制器中调用 $route.current.params，因为 "current" 还没有定义。

【问题讨论】：

这与您的问题无关，但我认为您在使用respond_with 时不能使用to_json。您必须提供一个对象，您的控制器将根据请求的格式调用适当的响应者。
我认为您通常是对的，除非我需要获取像 @user.to_json(include: :videos) 这样的关联。我只是把它放在那里，直到我弄清楚为什么我没有得到适当的回应。
在 json 响应中包含关联的首选方法是在模型中覆盖 as_json。至于您的问题，您可以将浏览器设置为记录 xhr 请求（chrome 可以）并在此处准确发布来回的内容吗？
啊，你是对的。我的错。我将浏览器设置为记录 xhr 请求，返回的对象是我所有用户的 JSON 数组。我将在上面发布一个示例（但不是实际的用户数据）。
我突然想到 - 是否允许我在 templateURL 中调用 JSON 对象？我读过的所有内容都显示部分 HTML 文件被调用...

标签： javascript angularjs

【解决方案1】：

我遇到了同样的问题。如果没有 ng-view，路由将不起作用。刚刚获得了 ng-view，您将获得 $routeParams。

问候

【讨论】：

【解决方案2】：

如果您使用路由到 ng-view 控制器的外部控制器（如顶栏或页面控制器），您需要订阅“$routeChangeSuccess”发出消息。

如果您不是接收控制器，则路由更改成功是异步的。这个 SO 答案给出了更完整的答案： $routeParams is empty in main controller

但这是 tldr；

$scope.$on('$routeChangeSuccess', function() {
  // $routeParams should be populated here
});

【讨论】：

【解决方案3】：

看起来 $routeParams 在控制器初始化时对那些通过 $routeProvider / ng-view 路由的控制器之外的控制器不可用。（至少在角度 1.0.8 中）

如果你想访问那些外部控制器中的路由参数，你可以使用$location.search().<param_name>

【讨论】：

【解决方案4】：

您的路线指向您的 api 路线。它们应该是要渲染的模板的路径：

@App = angular.module('app',['ngResource'])
  .config(['$routeProvider'], ($routeProvider) ->
    $routeProvider
      .when('/users',
        templateUrl: 'users/index.html',
        controller: 'UsersIndexCtrl')
      .when('/users/:id',
        templateUrl: 'users/show.html',
        controller: 'UsersShowCtrl')
      .otherwise(
        redirectTo: '/users'
    )])

然后，比如说，您的用户索引控制器可能看起来像：

App.controller 'UsersIndexCtrl',['$scope','$location','User', ($scope, $location, User) ->

  $scope.users = User.query()

  $scope.onClickHandlerToRoute = (user)->
    $location.path "path/to/show/user/#{user.id}"

您不需要注入 $http，因为您已经在使用 ngResource REST 抽象。

【讨论】：