Question

我有一个非常简单的Angular应用程序，我已经提炼到以下内容：

var napp = angular.module('Napp',['ngResource']);

var CompanyCtrl = function($scope, $routeParams, $location, $resource) {
    console.log($routeParams);
};


napp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/company/edit/:id', 
      {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}
    );
}]);

和HTML：

<div ng-controller="CompanyCtrl"></div>

当我记录$ routeParams时，它出现空白。当我使用.otherwise（）时，它将加载我在那里指定的任何内容。知道我错过了什么吗？

Answer 1

你有几个错误：

您已在视图（<div ng-controller="CompanyCtrl"></div>）和$ routeProvider（.when('/company/edit/:id', {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}）中的两个位置指定了控制器。我将删除视图中的那个。
在$ routeProvider中指定控制器时，你必须在模块中注册控制器（无论如何你应该真的这样做，最好避免使用全局控制器）。请napp.controller('CompanyCtrl', function ...代替var CompanyCtrl = function ...。
当您使用$ route服务时，您需要指定ng-view（不确定您是否这样做）

新代码：

var napp = angular.module('Napp', ['ngResource']);

napp.controller('CompanyCtrl', function ($scope, $routeParams, $location, $resource) {
  console.log($routeParams);
});

napp.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/company/edit/:id',
      {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}
    );
}]);

模板（/ parials / edit）

<div> ... </div>

和app（index.html或其他东西）

... <body> <div ng-view></div> </body>

我创建了一个工作的plunker示例：http://plnkr.co/edit/PQXke2d1IEJfh2BKNE23?p=preview

Answer 2

首先尝试使用

$locationProvider.html5Mode(true);

那应该修复你的起始代码。然后调整代码以支持非pushState浏览器。

希望这有帮助！

Answer 3

不确定这是否有帮助，但我自己就遇到过这个问题，并发现我无法记录路线参数，直到我有一些东西绑定它们。
所以，

路由器：

var myApp = angular.module('myApp', []);
myApp.config(function($routeProvider){

  $routeProvider.when('/projects/:id', 
    {templateUrl: '/views/projects/show.html', controller: 'ProjectCtrl'}
  );

});

控制器：

myApp.controller('ProjectCtrl', function($scope, $routeParams){
  $scope.id = $routeParams.id;
  console.log('test');
});

查看：

<h1>{{ id }}</h1>

当我从视图中删除“{{id}}”时，没有记录任何内容并且$ routeParams为空，至少在控制器实例化时是这样。正如上面的一些答案所指出的那样，路径参数是异步传递的，因此不会执行没有绑定到该属性的控制器。所以，不确定你已经从你的片段中提取了什么，但希望这会有所帮助！

Answer 4

如果您使用的是ui-router而不是ngRoute，则可能会发生这种情况（不在OP的情况下）。

如果是这种情况，请使用$stateParams代替$routeParams。

https://stackoverflow.com/a/26946824/995229

Answer 5

当然会是空白的。 RouteParams是异步加载的，因此您需要等待它获取参数。把它放在你的控制器中：

$scope.$on('$routeChangeSuccess', function() {
   console.log($routeParams); 
});

Answer 6

它对我有用http://plunker.co/edit/ziLG1cZg8D8cYoiDcWRg?p=preview

但是你的代码中有一些错误：

您的代码中似乎没有ngView。 $routeProvider使用ngView知道应该在哪里插入模板的内容。所以你需要在页面的某个地方。
您在两个地方指定了CompanyCtrl。您应该使用$routeProvider在ng-controller或您的模板中指定它。我喜欢在模板中指定它，但这只是个人偏好。
虽然不是错误，但您在全局范围内指定了CompanyCtrl，而不是使用Napp在Napp.controller(name, fn)模块中注册它。

希望这有帮助！
你可以随时在freenode上的#angularjs irc频道上播放：总是有活跃的人准备帮助

Answer 7

您的templateUrl是否指向无效模板？

当您将templateUrl更改为未存在的文件时，您会注意到将不再填充$routeParams（因为AngularJS在解析模板时检测到错误）。

为了您的方便，我创建了一个带有代码的工作plnkr，您可以复制并粘贴以使您的应用程序正常工作：

http://plnkr.co/edit/Yabp4c9zmDGQsUOa2epZ?p=preview

单击示例中的链接后，您将看到路由器正在运行。

希望有所帮助！

Angular $ routeParams为空

7 个答案: