当前位置：文江博客话题详情

JavaScript AngularJS SPA ui-router

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

发布于 2022-09-02 01:34:28 字数 2417 浏览 19 评论 0

<!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的时候他不会跳转页面呢？地址栏是没错的啊？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

遇见了你 2022-09-09 01:34:28

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

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

半﹌身腐败 2022-09-09 01:34:28

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

筑梦 2022-09-09 01:34:28

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

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文