0

Using ui-router in angular, I have setup a 'users' state where all the users in my application are returned in an ng-repeat. I am trying to create the show state for the users profile page however the view of the child state is inheriting the parent view 'templates/users/index.html' (Here is my app.js:

  .state('users', {
    abstract: true,
    name: 'users',
    url: '/users',
    views: {
      nav: {
        templateUrl: 'templates/navbar.html',
        controller: 'MainCtrl'
      },
      content: {
        templateUrl: 'templates/users/index.html',
        controller: 'UsersCtrl'
      }
    }
  })
    .state('users.show', {
      url: '/show/:id',
      views: {
        nav: {
          templateUrl: 'templates/navbar.html',
          controller: 'MainCtrl'
        },
        content: {
          templateUrl: 'templates/users/show.html',
          controller: 'UsersCtrl'
        }
      }
    });

Here is my index.html: 

    <div class="container">
  <label>Search: <input ng-model="searchText"></label>
  <a ui-sref="users.show({id: user.id})" ng-click="showUser(user.id)" ng-repeat="user in users | filter:searchText ">
    <h2> {{ user.name }} </h2>
    <h3> {{ user.email }} </h3>
    <button ng-click="createConversation({sender_id: current_user.id, recipient_id: user.id})" >Message</button>
  </a>
</div>

The url in the browser is http://localhost:8080/#/users/show/2 however the html file being inherited in the users.show state is the parents users (index.html) file.

Any help appreciated!

Sachin Karia
  • 547
  • 2
  • 8
  • 22
  • please read this [nested-route](http://stackoverflow.com/questions/34251255/creating-nested-route-app-in-angular-using-angular-ui-router-and-switching-betwe/34251256#34251256) – Maher Oct 22 '16 at 15:07

1 Answers1

1

The nested view users.show will actually render within the user view. So you just need to place another <ui-view> within templates/users/index.html where the show view will render.

xli
  • 1,298
  • 1
  • 9
  • 30