Angular UI-Router cannot resolve child state (with dynamic URL param) from its parent state

Question

I have a parent state with data that I would like to use for making child states with dynamic URL params. Currently, I am getting this error, "Error: Could not resolve 'authors/view/Baxter Richard' from state 'dash/authors'".

In my router.js file:

      .state('dashboard', {
        url: "/auth/dashboard",
        templateUrl: 'angular/dashboard.html',
        controller: 'DashboardController',
        resolve: {
          user : function(UserService) {
            return UserService.get();
          },
          user_drive : function(UserDriveService) {
            return UserDriveService.get();
          }
        }
      })

      .state('dash/authors', {
        parent: 'dashboard',
        url: "/authors",
        templateUrl: 'angular/partials/dash.authors.html'
      })

      .state('authors/create', {
        parent: 'dash/authors',
        url: "/create",
        templateUrl: 'angular/partials/dash.authors.create.html'
      })

      .state('authors/view', {
        parent: 'dash/authors',
        url: "/:title",
        templateUrl: 'angular/partials/dash.author-view.html'
      })

      .state('dash/epubs', {
        parent: 'dashboard',
        url: "/epubs",
        templateUrl: 'angular/partials/dash.epubs.html'
      });

      $urlRouterProvider.otherwise('/');
      $locationProvider.html5Mode(true).hashPrefix('!');

And in my dashboard_controller.js file:

    angular.module("app").controller("DashboardController", function($scope, $location, $http, user, user_drive) {

      $scope.user = user.data;
      $scope.user_drive = user_drive.data;

    });

And in my dash.authors.html partial:

          <div class="col-sm-3" ng-repeat="author in user_drive.authors | orderBy:'title'">
              <a ui-sref="authors/{{author.title}}">
                 <div ng-repeat="img in user_drive.author_imgs | filter: { parent_id: author.id }">
                   <img src="{{ img.img_src }}" alt="{{author.title}}" style="height:50px; border: 1px solid black;">
                </div>
              </a>
           <div>

So, when I click on the anchor tag with the ui-sref of "authors/{{author.title}}", I get that error.

user2891488 · Accepted Answer · 2014-05-19 17:11:57Z

3

I ended up renaming my states using the dot-style syntax. AFAIK, the problem was that I wasn't actually prepending the child state name with its exact parent state name (eg: 'dashboard' and 'dashboard.author') because I thought I just had to set the parent property inside the state (eg: "parent: 'dashboard',") and just name the child state whatever I wanted.

answered May 19, 2014 at 17:11

user2891488

811 silver badge9 bronze badges

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

1 Comment

majidarif Over a year ago

I'm having the exact same problem but my states are already in dot notation.

Remco Haszing · Accepted Answer · 2014-05-19 08:39:52Z

-1

I'm not sure whether you understand the concept of states in angular-ui-router. I suggest you thoroughly read the docs first. The state name is not the same as the state url. The correct usage would be for example:

<a ui-sref="authors/view({title:author.title})">...</a>

It passes the author.title variable to the state as title, meaning it replaces :title in the url. I also recommend not using slashes in the state name, as it seems very confusing.

answered May 19, 2014 at 8:39

Remco Haszing

7,9797 gold badges47 silver badges89 bronze badges

1 Comment

user2891488 Over a year ago

Thanks for the response. I ended up renaming my states using the dot-style syntax. I think the problem was that I wasn't actually prepending the child state name with its parent state name (eg: 'dashboard' and 'dashboard.author') because I thought I just had to set the parent property inside the state (eg: "parent: 'dashboard',") and just name the child state whatever I wanted. Thanks.

Collectives™ on Stack Overflow

Angular UI-Router cannot resolve child state (with dynamic URL param) from its parent state

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related