Angular - $ stateParams jest pusty w kontrolerze

Question

Mam wiele problemów ze zrozumieniem, jak powinny działać urządzenia StateParams. Gdziekolwiek spojrzę, sugeruję, że powinno to minąć item_id z 456, kiedy podróżuję pod adres URL /#/manage/456, ale zamiast tego $stateParams jest pustym obiektem. Co więcej, w obiekcie $state, który jest przekazywany do MainCtrl, mogę uzyskać dostęp do wszystkich parametrów za pomocą $state.params, jednak wydaje się to niepożądane i hackish.

angular 
    .module('router',['ui.router']) 
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) 
    { 

     $stateProvider 
      .state('manage', 
      { 
       url: '/manage', 
       templateUrl: '/templates/main.html', 
       controller: 'MainCtrl' 
      }) 
      .state('manage.item_id', 
      { 
       url: '/:item_id', 
       templateUrl: '/templates/main.html', 
       controller: 'MainCtrl' 
      }) 

    }]) 
    .controller('MainCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state) 
    { 
     // empty object 
     console.log('$stateParams: ', $stateParams); 

     // shows the variables i want 
     console.log('$state.params: ', $state.params); 
    }]) 

Answer 1

Co starasz się robić powinno działać poprawnie, zobacz ten JSFiddle: http://jsfiddle.net/ahchurch/gf7Fa/14/

<script type="text/ng-template" id="item.tpl.html"> 
    embeded item template 
</script> 

<script type="text/ng-template" id="main.tpl.html"> 
    <ul> 
     <li><a href="#/manage/45">change route</a></li> 
    </ul> 
    <div ui-view></div> 
</script> 

<div ui-view></div> 


angular.module('myApp',['ui.router']) 
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) 
    { 
     $urlRouterProvider.otherwise("/manage"); 
     $stateProvider 
      .state('manage', 
      { 
       url: '/manage', 
       templateUrl: 'main.tpl.html', 
       controller: 'MainCtrl' 
      }) 
      .state('manage.item_id', 
      { 
       url: '/:item_id', 
       templateUrl:'item.tpl.html', 
       controller: 'MainCtrl' 
      }) 
    }]) 
.controller('mainController', function(){}) 
    .controller('MainCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state) 
    { 
     // empty object 
     console.log("main controller"); 

     console.log($stateParams); 
    }]); 

Jedną rzeczą, jaką zauważyłem jest to, że szablon jest taki sam plik dla obu państw, więc może po prostu widzę inicjalizację stanu "zarządzaj" i nigdy nie widzę stanu "manage.item_id".