Angular JS : $routeProvider with dynamic url

Question

I have a menu that show different groups Name to which a user belongs . I prepared a template page so that when a user choose one of the menu's GROUPS , the template's fields change.

<li><a href="#"><i class="glyphicon glyphicon-folder-open"></i>Home </a></li>
<li><a data-toggle="collapse" ng-init="getAllGroupsofUser()"data-target="#groups">My Groups</a>
     <ul id="groups" class="collapse">
       <li ng-repeat="group in groupsofUser" ng-controller="groupsCTRL"><a 
           ng-click="openPage(group)">{{group.name}}</a>
        </li>
    </ul>
</li>

The Groups were successfully shown in the menu. I'm using ng-view and $routeProvider.

my $routeProvider

app.config(['$routeProvider',
   function($routeProvider) {
     $routeProvider
       .when('/', {
         templateUrl: 'home.html',
         controller:"MyController"
       })
       .when('/group/:groupname', {
         templateUrl: "groupTemplate.html",
         controller:"groupsCTRL"
       }).
       otherwise({
       redirectTo: '/'
     });
 }]);

my controller

app.controller( 'groupsCTRL',[ '$scope', '$http' , '$location', '$routeParams' ,function($scope, $http,$location,$routeParams){

     $scope.groupeName= $routeParams.groupname;

     $scope.openPage = function(group) {
        $scope.groupselected = group;
          console.log( "group: "+$scope.groupselected.id);
          location.href = "#/group/"+group.name;
    }

}]);

my template

<div class="row" >
      <h1 class="page-header">Groupe {{groupeName}} </h1>
</div>
<div class="row">
     {{groupselected.id}}
</div>

my problem is that the groupeName is displayed , but the groupselected.id is only displayed in the console (because i used console.log( "group: "+$scope.groupselected.id);)

please help me , I need to know if the group was passed to the page because in the next step I'll need to show informations about that selected group .

you need to use $location.path("#/group/"+group.name); instead of location.href = "#/group/"+group.name; — Pankaj Parkar
– Pankaj Parkar, Commented Apr 16, 2015 at 16:32
I 've changed it to $location.path("#/group/"+group.name); but this way the url has not changed and my page was not called — Yuri
– Yuri, Commented Apr 16, 2015 at 16:41
basically you need to call $scope.$apply() after it, will work for your case — Pankaj Parkar
– Pankaj Parkar, Commented Apr 16, 2015 at 16:43
sorry , I'm a begginner, I just have to write $scope.$apply() in my function ?? I didn't know how to do it — Yuri
– Yuri, Commented Apr 16, 2015 at 16:47
you could write $scope.openPage = function(group) { $scope.groupselected = group; console.log( "group: "+$scope.groupselected.id); $location.path("/group/"+group.name); if(!$scope.$$phase) $scope.$apply() } — Pankaj Parkar
– Pankaj Parkar, Commented Apr 16, 2015 at 17:17

Yuri · Accepted Answer · 2015-04-16 21:12:40Z

I solved my problem by creating a new RESTful Web Service to get the Group By Name (since it's unique)

//get Group by Name 
         $scope.getGroupByName = function(groupname){
              $scope.group=[];
            $http({method: 'GET', url: '/getGroupByName/'+groupname}).
             success(function(result) {
                $scope.group = result.data; 
                    }).
                    error(function(data, status, headers, config) {
                      // called asynchronously if an error occurs
                      // or server returns response with an error status.
                    });
          };

to which I can pass my groupeName and get the group

Pankaj Parkar · Accepted Answer · 2015-04-16 18:28:32Z

1

Use $location.path instead of location.href. Also In order to apply location changes, & then you need to run digest cycle.

Code

$scope.openPage = function(group) {
    $scope.groupselected = group;
    console.log( "group: "+$scope.groupselected.id);
    $location.path("/group/"+group.name);
    if(!$scope.$$phase) $scope.$apply();
};

answered Apr 16, 2015 at 18:28

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

3 Comments

Yuri Over a year ago

thanks , but it's just like my solution , Still can't show groupselected on the page

Pankaj Parkar Over a year ago

@marwa did you find any solution on this ?

Yuri Over a year ago

well , I 've created a new RESTful Web Service to get the Group By Name (since I can get the name $scope.groupeName= $routeParams.groupname and it's unique) and then I can get all the group information

Collectives™ on Stack Overflow

Angular JS : $routeProvider with dynamic url

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related