CODEWITHSUNDEEP
javascriptangularjsnestedstatesangular-ui-router
user2891488
user2891488

Reputation: 81

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

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.

Upvotes: 1

Views: 8048

Answers (2)

user2891488
user2891488

Reputation: 81

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.

Upvotes: 3

Remco Haszing
Remco Haszing

Reputation: 7809

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.

Upvotes: -1

Related Questions