angularjs - 角度 $routeParams 为空白

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() 时，它将加载我在那里指定的任何内容。知道我错过了什么吗？

score 10 · Accepted Answer

你有几个错误：

您已经在两个地方指定了控制器，在视图 ( <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>

和应用程序（index.html 什么的）

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

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

score 9 · Accepted Answer

首先尝试这个

$locationProvider.html5Mode(true);

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

希望这可以帮助！

score 3 · Accepted Answer

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

路由器：

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 为空，至少在控制器实例化时是这样。正如上面的一些答案所指出的那样，路由参数是异步传递的，因此没有绑定到该属性的控制器将不会执行。所以，不确定你从什么中提炼出你的片段，但希望这会有所帮助！

score 2 · Accepted Answer

如果您使用ui-router而不是ngRoute.

如果是这种情况，请使用$stateParams而不是$routeParams.

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

它适用于我http://plunker.co/edit/ziLG1cZg8D8cYoiDcWRg?p=preview

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

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

希望这可以帮助！
您可以随时在 freenode 上的#angularjs irc 频道上继续：总是有活跃的人随时准备提供帮助

score 0 · Accepted Answer

可能是您templateUrl指向无效的模板吗？

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

为方便起见，我使用您的代码创建了一个工作 plnkr，您只需复制和粘贴即可使您的应用程序正常工作：

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

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

希望有帮助！

angularjs - 角度 $routeParams 为空白

7 回答 7

Related

Reference