Angular UI-Router无法从其父状态解析子状态（具有动态URL参数）

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'".

我有一个父状态数据,我想用它来创建具有动态URL参数的子状态。目前,我收到此错误,“错误:无法从状态'破折号/作者'解析'authors / view / Baxter Richard'”。

In my router.js file:

在我的router.js文件中:

      .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:

在我的dashboard_controller.js文件中:

    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:

在我的dash.authors.html部分:

          <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.

所以,当我点击带有“authors / {{author.title}}的ui-sref”的锚标签时,我得到了那个错误。

2 个解决方案

#1

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.

我最终使用点式语法重命名我的状态。 AFAIK,问题在于我实际上并没有在子状态名称前加上其确切的父状态名称(例如:'dashboard'和'dashboard.author'),因为我认为我只需要在状态中设置父属性(例如:“父母:'仪表板',”)并且只需将孩子状态命名为我想要的任何名称。

#2

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:

我不确定你是否理解angular-ui-router中的状态概念。我建议你先仔细阅读文档。状态名称与州URL不同。正确的用法是例如:

<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.

它将author.title变量传递给作为标题的状态,这意味着它替换了url中的:title。我还建议不要在州名中使用斜杠,因为它看起来很混乱。