Вложенных маршруты шаблона в ui.router

Question

(AngularJS v1.2.28 - угловой-UI-маршрутизатор v0.2.13 В моей index.html я следующее: <div class="wrapper" ui-view></div>

В моем app.js у меня stateProvider установить в качестве:

$urlRouterProvider.otherwise('/app/search'); 
    $stateProvider.state("app", { 
     url: '/home', 
     controller: 'MainCtrl', 
     templateUrl: 'views/main.html' 
    }).state('app.search', { 

      resolve: { 
       categories: function ($q, $stateParams, LiveOak) { 

        var deferred = $q.defer(); 
        LiveOak.readMembers('/liveoak/storage/categories', { 
         success: function (categories) { 
          deferred.resolve(categories); 
         }, 
         error: function (error) { 
          console.error(error); 
         } 
        }); 
        return deferred.promise; 
       } 
      }, 
      url: '/search', 
      templateUrl: 'views/search.html', 
      controller: 'SearchCtrl' 
     } 
    ).state('app.subjects', { 
      url: '/subjects/:id', 
      abstract:true, 
      templateUrl: '<ui-view/>' 
     } 
    ).state('app.subjects.default', { 
      resolve: { 
       subjects: function ($q, $stateParams, LiveOak) { 

        var deferred = $q.defer(); 
        var categoryId = $stateParams.id; 
        var query = { 
         categoryId : categoryId 
        }; 
        LiveOak.readMembers('/liveoak/storage/subjects', { 
         query: query, 
         success: function (subjects) { 
          console.log("subjects resolved") 
          deferred.resolve(subjects); 
         }, 
         error: function (error) { 
          console.error(error); 
         } 
        }); 
        return deferred.promise; 
       }, 
       instructors: function ($q, $stateParams, LiveOak) { 

       } 
      }, 
      url: '', 
      templateUrl: 'views/subject.html', 
      controller: 'SubjectCtrl' 
     }).state('app.subjects.authors', { //THIS IS NOT RECOGNIZED 
      resolve: { 
       authors: function ($q, $stateParams, LiveOak) { 
        var deferred = $q.defer(); 
        var subjectId = $stateParams.id; 
        var query = { 
         query.subjectId : subjectId 
        }; 
        LiveOak.readMembers('/liveoak/storage/authors', { 
          query: query, 
          success: function (authors) { 
           deferred.resolve(authors); 
          }, 
          error: function (error) { 
           console.error(error); 
          } 
         } 
        ); 
        return deferred.promise; 
       } 
      }, 
      url: '/subjects/:id/authors/', 
      templateUrl: '../views/subjects.authors.html', 
      controller: 'AuthorsCtrl' 
     } 
    ); 
}]); 

Я борюсь с государством:. app.subjects.authors Сейчас app.search и app.subjects работы Однако, когда я пытаюсь идти на государство:. app.subjects. авторы даже не распознаются. Я настроил state app.subject как абстрактный, поэтому, надеюсь, app.subjects.authors не будут переопределены app.subjects. вы видите что-то необычное? Спасибо за помощь!

Мой subject.html выглядит следующим образом:

 <div ng-repeat="subject in subjects" class="mdl-cell mdl-cell--4-col"> 
       <a href="#/app/subjects/{{subject.categoryId}}/authors"> 
         <span>{{subject.name}}</span> 

       </a> 
     </div> 

Answer 1

Просто измените templateUrl: на template:. Вам не нужно abstract:.

.state('app.subjects', { 
    url: '/subjects/:id', 
    template: '<ui-view/>' 
}) 

Answer 2

Вы должны иметь:

url: '/authors', 

Вместо:

url: '/subjects/:id/authors/', 

Поскольку URL является относительным. Таким образом, URL-адрес дочернего состояния является продолжением URL-адреса родительского состояния. Таким образом, авторы будут соответствовать следующему URL:

/home/subjects/:id/authors