Burak Güneli Burak Güneli - 5 months ago 12
AngularJS Question

Can't get the value of $routeParams in a controller (AngularJs)

my config :

.config(function($stateProvider, $urlRouterProvider) {


$stateProvider


.state('tab.chats', {
url: '/chats/:id',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'detail'
}
}
})


$urlRouterProvider.otherwise('/tab/dash');

})


my controller :

.controller("detail", ["$scope", "$http", function($scope, $http, $routeParams){

$scope.data = $routeParams.id;


my html :

<ion-view>
<ion-content class="ata1">
<a href="#/tab/dash" rel="nofollow"><img id="logo" src="img/falimda.png" alt="" /></a>

<div class="clear"></div>


<div ng-controller="detail">
{{data}}
</div>


<div class="clear"></div>

<a href="#/tab/dash" class="button button-outline button-light">Back</a>

</ion-content>
</ion-view>


So here i'm programming a mobile application by Ionic Framework, and i couldn't solve something.

I'm trying to use this
id
inside my controller by using
routeParams
so that i can use that
id
to pull some data from web but unfortunately i can't reach it inside of my controller. I tried to test and print out my data inside
ng-controller
it didn't work. Can you help me?

Answer

You're using ui-router for the routing, but expecting to find the ui-router state parameters in ngRoute's routeParams service. Won't happen.

Use $stateParams, and remove the ngRoute dependency from your application, since you're using ui-router.

To fix the other, injection problem explained by the other answer, and avoid to repeat it later, I suggest you stick to the simple declaration or parameters (not using the array syntax which forces you to duplicate all service names), and use ng-annotate to make it minifiable automatically.