angularjs之向下一个页面传参
angularjs之向下一个页面传参
原理：
1.在a标签跳转时，连接后增加一个参数值
2.在路由中接收
3.在控制器中接收
实现：
1.<a href="#/list/{{val.id}}">
2.在js的config中写入：
.when('/list/:id', {
templateUrl: 'views.route.detail.html',
controller: 'RouteDetailCtl'
})
3.angular中使用routeParams传递参数.
在controller中直接使用：
.controller('RouteDetailCtl',function($scope, $routeParams) {
$scope.id = $routeParams.id;
})
就可以在接收页面获得id的值。
代码：
HTML片段：
<body ng-app="ngRouteExample" class="ng-scope"> <script type="text/ng-template" id="views.route.detail.html"> <h1> about</h1> <span style="color:#ff6666;"><h1>{{id}}</h1></span> </script> <script type="text/ng-template" id="embedded.home.html"> <h1> Home </h1> </script> <script type="text/ng-template" id="embedded.about.html"> <h1> About </h1> <span style="color:#ff6666;"><li ng-repeat="id in ID"> <a href="#/list/{{ id }}"> ID{{ id }}</a> </li></span> </script> <div> <div id="navigation"> <a href="#/home">Home</a> <a href="#/about">About</a> </div> <div ng-view=""> </div> </div> </body>
js片段：
<script type="text/javascript"> angular.module('ngRouteExample', ['ngRoute']) .controller('HomeController', function ($scope, $route) { $scope.$route = $route;}) .controller('AboutController', function ($scope, $route) { $scope.$route = $route;$scope.ID = [1,2,3];}) .controller('RouteDetailCtl',function($scope, $routeParams) { $scope.id = $routeParams.id; }) .config(function ($routeProvider) { $routeProvider
.when('/home', { templateUrl: 'embedded.home.html', controller: 'HomeController' })
.when('/about', { templateUrl: 'embedded.about.html', controller: 'AboutController' })
.when('/list/:id', { templateUrl: 'views.route.detail.html', controller: 'RouteDetailCtl' })
.otherwise({ redirectTo: '/home' }); }); </script>
转载自：http://blog.csdn.net/it_huge/article/details/52441652。
