각도 - $ stateParams가 컨트롤러에서 비어 있음

Question

stateParams의 작동 방식을 이해하는 데 많은 어려움을 겪고 있습니다. 어디에서나 URL /#/manage/456로 여행 할 때 이 456이되어야하지만 대신 $stateParams은 빈 개체임을 나타냅니다. 또한 MainCtrl에 전달 된 $state 개체에서 나는 $state.params을 사용하여 모든 매개 변수에 액세스 할 수 있습니다. 그러나 이것은 바람직하지 않으며 해킹 된 것으로 보입니다. 이 JSFiddle 볼 당신이 잘 작동해야 할 노력하고

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

: 내가 발견 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); 
    }]); 

한 가지, 템플릿이 두 상태에 대한 동일한 파일입니다입니다 그래서 당신은 할 수있다 "manage"상태의 초기화를보고 "manage.item_id"상태를 보지 못합니다.