$routeParams not accessible in controller, when controller not target of routeProvider?

11,812 views
Skip to first unread message

Roman Sachse

unread,
Aug 27, 2012, 12:03:02 PM8/27/12
to ang...@googlegroups.com
Hi there,

I have a problem with accessing the $routeParams service from a controller. I can not get fiddle or plunker to work with routeParameters so I will have to post the code here sorry.
Request: .../#/view/hallo
Html:
<body ng-controller="MainCtrl">
  // loaded template
  <div ng-view></div>

  <script type="text/ng-template" id="templ"> </script>

Angular:
angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view/:test', {templateUrl: 'templ', controller: SubCtrl});
  }]);

function MainCtrl($routeParams) {
    console.log($routeParam.test);  <=== undefined?!?
}

function SubCtrl($routeParams) {
    console.log($routeParams.test); <== 'hallo', as expected
}

Is this the intended behavior? Why am I not able to access the route Param from the main controller?

Greeting,

Ro

Roman Sachse

unread,
Aug 27, 2012, 12:14:34 PM8/27/12
to ang...@googlegroups.com
Now I am completely confused. When I debug.log the $routeParams object I get:
In SubCtrl:
SubCtrl $routeParams => Object test: "hallo" __proto__: Object
SubCtrl $routeParams.test => hallo

And in Main Ctrl:
MainCtrl $routeParams => Object test: "hallo" __proto__: Object
MainCtrl $routeParams.test =>  undefined

So if am logging $routeParams the test property seems to be there and one line later it is undefined?!?

A I missing something?

Pawel Kozlowski

unread,
Aug 27, 2012, 1:25:07 PM8/27/12
to ang...@googlegroups.com
Hi Roman!

Actually you can illustrate $route behavior with jsFiddle (or even
better - plunker), I was blogging about this few weeks back.

Anyway, this jsfiddle:
http://jsfiddle.net/pkozlowski_opensource/pt39h/1/ shows that you can
have access to $routeParams in both Main and Sub controllers.

The problems you were having in your example is that you were trying
to log things in a controller's constructor function. Those functions
are not run on each and every route change but only when a respective
scope is created / destroyed.

In your example the Main controller was called only once (at the
application's startup), before a route was matched so this is why it
was undefined. The sub-controller, on the other hand, is re-created on
each route match (and after a route is matched) so this is why it was
defined correctly.

Hope that the above explanations make sense but if not please feel
free to play with the attached fiddle and ask more questions.

Cheers,
Pawel
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

Will Kriski

unread,
Aug 27, 2012, 2:45:16 PM8/27/12
to ang...@googlegroups.com
I believe you need to specify a controller for each view, even the default, which you haven't done for the main controller. I have something like this:

    $routeProvider.when('/main', {templateUrl: 'tpl/main.html', controller: GridCtrl});
    $routeProvider.otherwise({redirectTo: '/main'});

So the default URL will use the GridCtrl (a catch all).

Hope this helps,
Will

Pawel Kozlowski

unread,
Aug 27, 2012, 2:48:39 PM8/27/12
to ang...@googlegroups.com
Will,

have a look at the code snippet in the original e-mail:

<body ng-controller="MainCtrl">

as you can see the MAinCtrl is defined on the body level so "above"
the part that is touched by routes.

Cheers,
Pawel

Will Kriski

unread,
Aug 27, 2012, 3:03:33 PM8/27/12
to ang...@googlegroups.com
Understood. I was just trying to explain that with an 'otherwise' statement you can invoke the routes right away if you want, since there are no routeParams values in your object until you click one of your links. But if there are no values you can assume you're on the main page as well.

W

Roman Sachse

unread,
Aug 27, 2012, 3:25:27 PM8/27/12
to ang...@googlegroups.com
Hi Pawel

Your explanation perfectly makes sense. Thanks a lot. I will have a look at your blog post as well.

Cheers,

Ro

jonr

unread,
Oct 3, 2012, 7:13:56 PM10/3/12
to ang...@googlegroups.com
Hi Pawel,

In your jsfiddle, I was wondering if you could modify it so if you were initially pointed to page foo, it would still display the routeParams. Right now I want to be able to link to one of my pages, and since my MainControl is setting which tab to be the active tab, it is unable to do so. The SubControl has the routeParams initially, however, since I have my applications like so:

<body ng-controller="PageNavigationViewModel">
  <ul class="nav nav-pills">
    <li ng-repeat="page in applicationTabs" ng-class="isActivePage(page)">
<a ng-click="switchPage(page)" ng-href="#/{{page.id}}">{{page.title}}</a>
</li>
  </ul>
  
  <p>{{routeParams}}</p>

  <div ng-view></div>
</body>

So initially in my PageNavigationViewModel, since the routeParams are undefined, I can't set which tab to be active. However, once I click the tab it will correctly display the active tab.

Thanks,
Jon

jonr

unread,
Oct 3, 2012, 7:15:36 PM10/3/12
to ang...@googlegroups.com
Here is my javascript:

function PageNavigationViewModel($scope,  $routeParams) {  
$scope.applicationTabs = {
"applications":
{
"id": "applications",
"title": "Applications"
},
"contacts":
{
"id": "contacts",
"title": "Contacts"
}
}
$scope.selectedPage = $scope.applicationTabs[$routeParams.pageId];
$scope.isActivePage = function(page){
return $scope.selectedPage == page ? 'active' : '';
}
$scope.switchPage = function(page){
$scope.selectedPage = $scope.applicationTabs[page.id];
}
}


function PageViewModel($scope,  $routeParams) {
alert($routeParams.pageId);
}

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:pageId', {templateUrl: 'partials/partial1.html', controller: PageViewModel});
  }]);

jonr

unread,
Oct 3, 2012, 8:22:36 PM10/3/12
to ang...@googlegroups.com
I didn't realize I could access the parent controls methods within the subcontrol. At the start of my subcontrol, I call the method to switch tabs and it gets set correctly.

Thanks,
Jon

Richard Brammer

unread,
Feb 11, 2013, 11:22:24 AM2/11/13
to ang...@googlegroups.com
Hi Everyone,

The weird thing is, that if you want to use any of the attributes within routeparams, you can't access their value. I changed the fiddle, so only the value of test should be given in the MyCtrl. 

It know shows nothing which seems to be a problem for an application like this to run.

Best regards,
Richard


Am Montag, 27. August 2012 19:25:07 UTC+2 schrieb Pawel Kozlowski:

regan....@gmail.com

unread,
May 29, 2013, 12:19:57 PM5/29/13
to ang...@googlegroups.com
I'm having the same issue as well. I can literally call console.log($routeParams, $routeParams.parameter); and get different results.

angular.copy() returns an empty object, so that isn't any help, either.

Samuel Gray

unread,
Mar 26, 2014, 7:13:33 AM3/26/14
to ang...@googlegroups.com
instead of routeParams try: $route.current.params.variableName

Cheers,

Sam
Reply all
Reply to author
Forward
0 new messages