爲什麼我的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> 

的問題是，我第一次進入應用程序（否則工作正常），但當試圖點擊一個超鏈接的細節/編號我得到這個錯誤：錯誤：無法解析狀態'home.list''細節'，我現在有點困惑！ ！

Answer 1

您需要在UI-S參考，而不是僅僅details使用home.details。

我有一個在this Plunkr工作的例子。

Answer 2

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