AngularJS ui-router doesn't work with nested views

Question

I user ui-router for my application. In my application, click User navigation bar will navigate to a screen for a list of users. At this screen, if clicking a user it goes to User Edit screen, if clicking New User button it goes to Add User screen. I route them as below:

1. home.html
<html ng-app="app">
<head>
</head>
<body>
<div ng-controller="MainCtrl">
    <ul>

            <li ><a href="#">Home</a></li>
            <li ><a href="#/user">List Users</a></li>                           
            <li ><a href="#/products">List Products</a></li>

        </ul>
        </div>
        <div >
            <div ui-view></div>
        </div>
</div> 
    <script src="angular.js"></script>
    <script src="angular-ui-router.js"></script>
</body>
</html> 


2. app.js
app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/user')
    $stateProvider.
          state('user', 
                  {url: '/user', templateUrl: 'views/user-list.html',   controller: UserListController}).
          state('user.edit',
                  {url: '/user/edit/:userId', templateUrl: 'views/user-edit.html', controller: UserEditController}).
          state('add', 
                  {url: '/user/add', templateUrl: 'views/user-add.html', controller: UserAddController})
});


3. user-list.html
<div>
  <ul>
    <li ng-repeat="user in userList ">
        <a href="#/user/edit/{{user.uid}}">{{user.name}}</a>
    </li>
  </ul> 
</div>
<div>     
 <a href="#/user/add"><button>New User</button></a>
</div>

The problem raises with naming state for edit route. If I choose name 'user.edit' with 'user' part is exactly the name of list state, then click edit link, ui-router can't route to edit page. If I choose a name without hierachy to 'user', say 'edit' or 'change' for edit state, it works. Also, in case of add route, I name 'add', it works. Am I wrong something? Please advice.

alexc · Accepted Answer · 2013-08-04 03:54:57Z

4

It looks like your url for the edit state might be causing problems. Urls of child states will be appended to the url of the parent state by default, but you're using the full path. Try changing your edit url to just '/edit/:userId', which should automatically be appended to '/user' from the user state. Adding a caret '^' to the beginning of the edit url you have now should also fix it, but doesn't make as much sense in your case.

Appended/Absolute URLs

answered Aug 4, 2013 at 3:54

alexc

1,6871 gold badge9 silver badges9 bronze badges

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

Comments

ebohlman · Accepted Answer · 2013-07-24 19:24:33Z

0

You need to use the special ng-href attribute in place of the regular href if you're going to be interpolating expressions into the URL; otherwise the expression will be treated literally.

answered Jul 24, 2013 at 19:24

ebohlman

15k5 gold badges35 silver badges35 bronze badges

3 Comments

bnguyen82 Over a year ago

Thanks for your response. I find its not the problem with url because edit url is generated properly. The problem is actually with naming state hierachily.

Asaf Over a year ago

@bnguyen82 can you please post your solution or just give the correct way to name your states? I think I facing a similar problem. Thanks

bnguyen82 Over a year ago

@Asaf: see answer by alexc. It fix an error of my example. However, I still can't make it work for my example althrough I tried another example successfuly.

Collectives™ on Stack Overflow

AngularJS ui-router doesn't work with nested views

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related