为什么我的路由器UI在angular.js中没有像预期的那样工作

Why my router UI in angular.js is not working as expected?

本文关键字：工作 路由器 我的路 我的 UI js angular 为什么      更新时间：2023-09-26

我的问题是路由没有按预期工作，这是我的代码:

$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我得到这个错误:错误:无法解决'详细信息'从状态'家。清单，我现在有点困惑!!

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

我有一个例子在这个普朗克工作。

    <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>
相关文章：