javascript Angular - $stateParams 在控制器中为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23667521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular - $stateParams Is Empty In Controller
提问by BlinkyTop
I am having a lot of trouble understanding how stateParams are supposed to work. Everywhere I look suggests that this should pass an item_idof 456 when I travel to the URL /#/manage/456, but instead $stateParamsis an empty object. Furthermore, in the $stateobject that is passed to MainCtrl, I can access all of the parameters by using $state.params, however this seems to be undesirable and hackish.
我在理解 stateParams 应该如何工作时遇到了很多麻烦。我所看到的任何地方都表明，item_id当我访问 URL 时，这应该传递456 /#/manage/456，而是$stateParams一个空对象。此外，在$state传递给 MainCtrl的对象中，我可以使用 访问所有参数$state.params，但这似乎是不可取的和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);
}])
回答by Andrew Church
What you're trying to do should work fine, see this JSFiddle: http://jsfiddle.net/ahchurch/gf7Fa/14/
您尝试做的事情应该可以正常工作，请参阅此 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);
}]);
One thing I noticed is that your template is the same file for both states, so you may just be seeing the initialization of the "manage" state, and never seeing the "manage.item_id" state.
我注意到的一件事是，您的模板对于两种状态都是相同的文件，因此您可能只看到“管理”状态的初始化，而从未看到“管理.item_id”状态。
