routing with parameters not working in angularjs

Question

Having issue while routing

common.js

when('/showmessage/:groupkey/:groupmessage', {
    templateUrl: 'templates/groups/showmessage.html',
    controller: 'GroupsController'
  }).
 when('/showmessage/:groupkey/:channelmessage', {
    templateUrl: 'templates/channels/showmessage.html',
    controller: 'ChannelsController'
  }).

index.html

<md-list-item class="md-3-line" ng-repeat="usergroup in usergroups">
<a ng-href="#/showmessage/{{usergroupkey}}/{{'groupmessage'}}">
    <img ng-src="images/abc.png" class="md-avatar">                 
</a> 
<a ng-href="#/showmessage/{{usergroupkey}}/{{'channelmessage'}}">
    <img ng-src="images/abc.png" class="md-avatar">                 
</a>

When I click on group(1st link) it outputs grouplist page. But, when I click on channel(2nd link) it outputs grouplist page. Issue is when I am using different controllers, urls then why it is displaying same list page.

Angular's ng-router takes URL's into consideration, so in this you don't have 2 different URLs, even though param names are different. I'd suggest you to change URL or use ui-router for routing. Something like showgroupmessage and showchannelmessage — Aniket Sinha
– Aniket Sinha, Commented Apr 15, 2016 at 13:29

Walfrat · Accepted Answer · 2016-04-15 13:20:30Z

1

To complete Antenka answer here is how you should write things :

when('/showmessage/groupmessage/:groupkey', {
    templateUrl: 'templates/groups/showmessage.html',
    controller: 'GroupsController'
  }).
when('/showmessage/channelmessage/:groupkey', {
    templateUrl: 'templates/channels/showmessage.html',
    controller: 'ChannelsController'
}).

Usage :

<md-list-item class="md-3-line" ng-repeat="usergroup in usergroups">
<a ng-href="#/showmessage/groupmessage/{{usergroupkey}}">
    <img ng-src="images/abc.png" class="md-avatar">                 
</a> 
<a ng-href="#/showmessage/channelmessage/{{usergroupkey}}">
    <img ng-src="images/abc.png" class="md-avatar">                 
</a>

answered Apr 15, 2016 at 13:20

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Antenka · Accepted Answer · 2016-04-15 13:18:23Z

0

It happens because your query matched at the 1st route, so it won't proceed to the next one. Giving different names to the params, doesn't give you different URLs.

answered Apr 15, 2016 at 13:18

Antenka

1,5292 gold badges19 silver badges29 bronze badges

Collectives™ on Stack Overflow

routing with parameters not working in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related