Angular $routeParams пуст

У меня действительно простое приложение 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(), он будет загружать все, что я там указал. Любая идея, что мне не хватает?

Ответ 1

Прежде всего попробуйте это с помощью

$locationProvider.html5Mode(true);

Это должно исправить ваш начальный код. Затем настройте свой код для поддержки браузеров без pushState.

Надеюсь, это поможет!

Ответ 2

У вас есть несколько ошибок:

Вы указали контроллер в двух местах, как в представлении (<div ng-controller="CompanyCtrl"></div>), так и в $routeProvider (.when('/company/edit/:id', {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}). Я бы удалил это в представлении.
Вам необходимо зарегистрировать контроллер в модуле, указав его в $routeProvider (вы должны это делать в любом случае, лучше избегать глобальных контроллеров). Сделайте napp.controller('CompanyCtrl', function ... вместо var CompanyCtrl = function ....
Вам нужно указать ng-view, когда вы используете услугу $route (не уверен, что вы делаете это или нет)

Новый код:

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

Ответ 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 не было пустым, по крайней мере, во время создания экземпляра контроллера. Как указывали некоторые из вышеперечисленных ответов, параметры маршрута передаются асинхронно, поэтому контроллер без привязки к этому свойству не будет выполняться. Итак, не совсем точно, от чего вы отделили свой отрывок, но надеюсь, что это поможет!

Ответ 4

Конечно, он будет пустым. RouteParams загружается асинхронно, поэтому вам нужно ждать, пока он получит параметры. Поместите это в свой контроллер:

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

Ответ 5

Это может произойти (не в случае OP), если вы используете ui-router вместо ngRoute.

Если в этом случае используйте $stateParams вместо $routeParams.

fooobar.com/questions/351571/...

Ответ 6

Это работает для меня http://plunker.co/edit/ziLG1cZg8D8cYoiDcWRg?p=preview

Но у вас есть некоторые ошибки в вашем коде:

В вашем коде не похоже ngView. $routeProvider использует ngView, чтобы знать, где он должен вставлять содержимое шаблона. Поэтому вам это нужно где-то на вашей странице.
Вы указываете свой CompanyCtrl в двух местах. Вы должны указать его либо в $routeProvider, либо в шаблоне, используя ng-controller. Мне нравится указывать его в шаблоне, но это только личное предпочтение.
Хотя это не ошибка, вы указываете свой CompanyCtrl в глобальной области, вместо того, чтобы регистрировать его в своем модуле Napp, используя Napp.controller(name, fn).

Надеюсь, что это поможет!
Вы всегда можете перейти на канал #angularjs irc на freenode: там всегда активны люди, готовые помочь

Ответ 7

Может быть, ваш templateUrl указывает на недопустимый шаблон?

Когда вы меняете templateUrl на неиспользуемый файл, вы заметите, что $routeParams больше не будет заполняться (поскольку AngularJS обнаруживает ошибку при разрешении шаблона).

Я создал рабочий plnkr с вашим кодом для вашего удобства, который вы можете просто скопировать и вставить, чтобы заставить ваше приложение работать:

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

Как только вы нажмете ссылку в примере, вы увидите, что маршрутизатор находится в действии.

Надеюсь, что это поможет!