search

Home  >  Q&A  >  body text

angular.js - angualr $routeParms为什么不起作用?

<!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>
    <p ng-view></p>

<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>
高洛峰高洛峰2744 days ago618

reply all(2)I'll reply

  • 我想大声告诉你

    我想大声告诉你2017-05-15 17:10:30

    Careless coding error href="#/view/{{}message.id}"

    reply
    0
  • 天蓬老师

    天蓬老师2017-05-15 17:10:30

    If you use angular-uiroute, just use state.go (page name).

    reply
    0
  • Cancelreply