UI-路由器不使用参数进行路由

Question

我用UI-Router。我有第一个控制器

vehicuels.controller.js:

'use strict';

angular.module('autoPrivilegeApp')
  .controller('VehiculesCtrl', function ($scope,$http, $state) {
    $scope.awesomeThings = [];

    $http.get('/api/cars').success(function (awesomeThings) {
      $scope.message = awesomeThings;
    });

    // Show Car detail
    $scope.showCarDetail = function (_id) {
      $state.go('vehiculeDetail', {id: _id});
    };
  });

vehicules.js:

'use strict';

angular.module('autoPrivilegeApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('vehicules', {
        url: '/vehicules',
        templateUrl: 'app/vehicules/vehicules.html',
        controller: 'VehiculesCtrl'
      });
  });

vehicules.html:

<div class="col-md-12">
<div ng-repeat="car in message">
  <button class="medium bouton bleu" ng-click="showCarDetail(car._id);">
    {{ car._id }}
</button>
  <br/><br/><br/><br/>
</div>
</div>

我想将 id 传递给我的第二个控制器

vehiculeDetail.controller.js:

'use strict';

angular.module('autoPrivilegeApp')
  .controller('VehiculeDetailCtrl', function ($scope,$stateParams ) {
    $scope.message =  $stateParams.instanceID;
  });

vehiculeDetails.js:

'use strict';

angular.module('autoPrivilegeApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('vehiculeDetail', {
        url: '/vehiculeDetail/{id}',
        templateUrl: 'app/vehiculeDetail/vehiculeDetail.html',
        controller: 'VehiculeDetailCtrl'
      });
  });

vehiculeDetail.html:

<div class="col-md-12">
This is the vehiculeDetail id {{message}}.
</div>

我使用了 yeoman 生成器 --> generator-angular-fullstack

我的问题是我的控制器 VehiculeDetailCtrl 中没有我的 id。怎么了？

Answer 1

$stateParams 使用在 url:

中定义的名称

$stateProvider
  .state('vehiculeDetail', {
    url: '/vehiculeDetail/{id}', // here we name our param as 'id'

所以，我们现在必须使用名称 id 而不是 instanceID

.controller('VehiculeDetailCtrl', function ($scope,$stateParams ) {
  //$scope.message =  $stateParams.instanceID;
  $scope.message =  $stateParams.id;

UI-路由器不使用参数进行路由

UI-Router don't route with param

angularjs

angular-ui

angular-ui-router