UI-Router Child/nested state does not load

Question

I've had a look at similar questions, but their problem seems to resolve around the lack of <ui-view /> tag in the parent HTML. Here, it's not the case.

I have a child state that does not load:

routes.js

angular.module('myapp').config(function($stateProvider, $locationProvider, $urlRouterProvider){ $urlRouterProvider.otherwise('/'); //A bunch of unrelated routes $stateProvider.state({ 'name': 'users', 'url': '/users', 'controller': 'usersCtrl', 'templateUrl': '/scripts/pages/users/users.html' }); $stateProvider.state({ 'name': 'users.editeduser', 'url': '/editeduser', 'template': '<h1>HELLO</h1>' // 'templateUrl': '/scripts/pages/users/parts/editedUser.html', // 'controller': 'editedUserCtrl' // 'resolve': { // editedUserId: function(editedUserId) { // return editedUserId; // } // } });

users.html

<div class="panel panel-default"> <div class="panel-heading"> <h3>Users List</h3> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item" ng-repeat="user in users track by $index">{{user.firstname + " " + user.lastname}}</li> </ul> <ui-view name="users.editeduser"></ui-view> </div> <div class="panel-footer"> <button class="btn btn-primary" ui-sref="user-edit">New User</button> </div> </div>

In the html code uiview line, I tried using <ui-view name=".editeduser"></ui-view> and I also tried just <ui-view name="editeduser"></ui-view> to no avail. I even tried <div ui-view=....

As you can see in the commented out routes.js code, there is a supposed controller and html template that the child is supposed to have, but I removed them for the sake of trying to work out the problem.

In Chrome Dev Tools, this is the output:

Any help would be appreciated. Thanks

create a fiddle/plunker from your code to get it solved faster — tanmay
– tanmay, Commented Apr 17, 2017 at 5:24

georgeawg · Accepted Answer · 2017-04-17 07:46:48Z

The ui-sref for the button doesn't match the url for that state:

<div class="panel-footer"> <!-- ERRONEOUS <button class="btn btn-primary" ui-sref="user-edit">New User</button> --> <!-- INSTEAD --> <button class="btn btn-primary" ui-sref="users/editeduser">New User</button> </div>

I think you're onto something though because at no where to I call the child state in my code, and I think I need to call it for it to be loaded, but I am not sure of how to. I'll try to look at the documentation and see –

The UI-Router for AngularJS (1.x) - Hello Galaxy! Tutorial has a DEMO that shows a state with a list of people. The child view with information on an individual only becomes visible when the person is selected.

The DEMO on PLNKR

As confusing as it sounds, there is another state called "user-edit" $stateProvider.state({ 'name': 'user-edit', 'url': '/user-edit', 'controller': 'userEditCtrl', 'templateUrl': '/scripts/pages/users/userEdit.html' });
I think you're onto something though because at no where to I call the child state in my code, and I think I need to call it for it to be loaded, but I am not sure of how to. I'll try to look at the documentation and see

Collectives™ on Stack Overflow

UI-Router Child/nested state does not load

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related