為什么我的angular.js中的路由器UI無法正常工作？

Question

我的問題是路由無法按預期工作，這是我的代碼：

$urlRouterProvider.
otherwise('/list');

$stateProvider.
state('home', {
abstract: true,
views: {
    'header': {
        templateUrl: 'partials/header.html',
        controller: 'HeaderController'
    },
    'breadcrumb': {
        templateUrl: 'partials/breadcrumb.html',
        controller: function($scope) {
            $scope.breadcrumb = ['Home', 'Library', 'Data'];
        }
    },
    'sidebar': {
        templateUrl: 'partials/sidebar.html'
    }
}

}).
state('home.list', {
url: '/list',
views: {
    'main@': {
        templateUrl: 'partials/list.html',
        controller: 'ListController'
    }
 }
 }).
state('home.details', {
url: '/details/:id',
views: {
    'main@': {
        templateUrl: 'partials/details.html',
        controller: 'DetailsController'
    }         
}
});

在我的索引中，我有這個：

<div class="container">
    <div class="row">
        <!-- SideBar -->
        <div ui-view="sidebar" class="col-xs-3 sidebar"></div>
        <!-- /.SideBar -->


        <div class="col-xs-8">
            <!-- Breadcrumb -->
            <div ui-view="breadcrumb" class="pull-right"></div>
            <!-- /.Breadcrumb -->

            <!-- Main Content -->
            <div ui-view="main"></div>
            <!-- /.Main Content -->
        </div>
    </div>
</div>

問題是我第一次進入該應用程序（否則工作正常），但是當嘗試單擊包含詳細信息/ id的超鏈接時，出現此錯誤：錯誤：無法從狀態“ home.list”解析“詳細信息”，我現在有點困惑！

Answer 1

    <table class="table table-hover"> 
<thead> 
<tr> 
<th>Name</th> 
<th>Address</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="person in persons"> 
<!-- <td><a ui-sref="details({id: persons.indexOf(person)})">{{person.name}}</a></td> -->

 <td><a ui-sref="home.details({id: persons.indexOf(person)})">{{person.name}}</a></td> 
    <td>{{person.address}}</td> 
    </tr> 
    </tbody> 
    </table>

Answer 2

您需要在ui-sref中使用home.details ，而不僅僅是details 。

我有一個在此Plunkr中工作的示例。