Question

我因为一个我无法看透的问题而被困了一天。

我在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”尚未定义。

Answer 1

我遇到了同样的问题。如果没有 ng-view ，路由将无效。只需要 ng-view ，您就可以获得$ routeParams。

问候

Answer 2

如果您使用外部控制器连接到路由到ng-view控制器（如顶部栏或页面控制器），您需要订阅＆＃39; $ routeChangeSuccess＆＃39;发出消息。

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

但这是tldr;

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

Answer 3

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

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

Answer 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}"

由于您已经在使用ngResource REST抽象，因此无需注入$ http。

Angular $ routeParams返回空对象

4 个答案: