Question

（AngularJS v1.2.28 - angular-ui-router 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.authors甚至无法识别。我将状态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的延续。所以作者州将匹配以下网址：

/home/subjects/:id/authors

ui.router中的嵌套模板路由

2 个答案: