angular-ui-router 路由跳转问题？

<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Title</title>
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
</head>
<body>
<div ui-view></div>
<script type="text/javascript">
    var testApp = angular.module('testApp', ['ui.router']);
    testApp.config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/');

        $stateProvider
                .state('index', {
                    url: '/',
                    template: '<ul><li ng-repeat="item in items" data-id="{{item.id}}">{{item.name}}</li></ul>',
                    controller: function($scope, $state){
                        $scope.items = [
                            {
                                name: '张三',
                                id: 1
                            },
                            {
                                name: '李四',
                                id: 2
                            },
                            {
                                name: '王五',
                                id: 3
                            }
                        ];

                        $(function(){
                            $('li').click(function(){
                                console.info($(this).data('id'));
                                var id = $(this).data('id');
                                $state.go('index.detail', {
                                    id: id
                                });
                            });
                        })
                    }
                })
                .state('index.detail', {
                    url: ':id',
                    template: '<h1>This is detail</h1>'
                })
    });
</script>
</body>
</html>

就是为什么我点击li的时候他不会跳转页面呢？地址栏是没错的啊？

至少要在第二个state的url中加/， url:'/:id'

你检查下是不是页面和controller里面的问题。既然地址能跳那证明路由没有问题。你看看请求里面是否有加载你配置的那个页面。

盗用了文档的代码，你为何不这样做呢？

$stateProvider
    .state('contacts', {
        abstract: true,
        url: '/contacts',
        templateUrl: 'contacts.html',
        controller: function($scope){
            $scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
        }           
    })
    .state('contacts.list', {
        url: '/list',
        templateUrl: 'contacts.list.html'
    })
    .state('contacts.detail', {
        url: '/:id',
        templateUrl: 'contacts.detail.html',
        controller: function($scope, $stateParams){
          $scope.person = $scope.contacts[$stateParams.id];
        }
    })
    
<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>

<!-- contacts.list.html -->
<ul>
    <li ng-repeat="person in contacts">
        <a ng-href="#/contacts/{{person.id}}">{{person.name}}</a>
    </li>
</ul>

<!-- contacts.detail.html -->
<h2>{{ person.name }}</h2>

【热门文章】