angualr $routeParms为什么不起作用?

发布于 2022-09-04 02:39:08 字数 2438 浏览 17 评论 0

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
</head>
<body>
    <div ng-view></div>

<script type="text/javascript">
    var app=angular.module("myApp",['ngRoute']);
    app.config(function($routeProvider){
        $routeProvider.when("/",{
            controller:"listController",
            templateUrl:'list.html'
        }).
        when("/view/:id",{
            controller:"detailController",
            templateUrl:"detail.html"
        }).
        otherwise({
            redirectTo:'/'
        })
    });

    var msg=[
    {
        id:0,date:'2014-1-1',info:"aaaaaa",sender:"BB",detail:"fhjdskgfdlgfdlsgfydl"
    },{
        id:2,date:'2015-1-1',info:"bbbb",sender:"AA",detail:"aaaaaaaaaaaaaaaaa"
    },{
        id:3,date:'2016-1-1',info:"cccc",sender:"CC",detail:"bbbbbbbbbbb"
    },{
        id:4,date:'2017-1-1',info:"dddd",sender:"DD",detail:"vvvvvvvvvvvvv"
    },{
        id:5,date:'2018-1-1',info:"fffff",sender:"GG",detail:"dsadsasssssssss"
    },{
        id:6,date:'2019-1-1',info:"eqrq",sender:"RR",detail:"fhjdskgfdlgfdlsgfydl"
    },{
        id:7,date:'2014-11-1',info:"3213213",sender:"MM",detail:"fhjdskgfdlgfdlsgfydl"
    }
    ];

    app.controller("listController",function($scope){
        $scope.messages=msg;
    });
    app.controller("detailController",function($scope,$routeParams){
        console.log($routeParams);//为什么打印的是这个?id:"{{}message.id}"
        alert($routeParams);
        $scope.detailmsg=msg[$routeParams.id];

    });
</script>
</body>
</html>
-------list.html---------------

<table>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
    <tr ng-repeat="message in messages">
        <td>{{message.sender}}</td>
        <td><a href="#/view/{{}message.id}">{{message.info}}</a></td>
    </tr>
</table>

----------detail.html:detailmsg.sender没有报错,但却不能显示数据?--------------
<p>{{detailmsg}}</p>   
<p>{{detailmsg.sender}}</p>
<p>111111</p>

<a href="#/">back home</a>

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

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

发布评论

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

评论(2

如何视而不见 2022-09-11 02:39:08

粗心代码写错 href="#/view/{{}message.id}"

究竟谁懂我的在乎 2022-09-11 02:39:08

你用angular-uiroute,直接state.go(页面名称)就可以了。

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