1、在跳转a标签中通过跳转指令设置
ui-sref='state名称({键值对1,键值对2})'
其中,值如果是变量会自动解析,如果是字符串需要加""
2、在对应state路由中设置
在url路径后添加"/{键名}/{键名}"
3、读取参数
在对应的controller中,注入$stateParams
$stateParams.键名调用
代码示例:
<html ng-app="app" ng-controller="main">
<head>
<meta charset="utf-8">
<title ></title>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular.route.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.25/angular-ui-router.js"></script>
<style>
.a{
color:red;
}
</style>
</head>
<body>
<div ng-controller='d1'>
<a href="#">首页</a>
<a href="#/home">home</a>
//传入参数
<a href="" ui-sref='movie({sex:"male",age:"18"})'>movie</a>
<a href="" ng-click="go('home')">跳转到home</a>
<!-- 当访问路由出错,会显示内容 -->
<div ui-view>页面不存在</div>
</div>
<script>
var app=angular.module('app',['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
//将'/hd'设置为默认页,打开页面自动跳转
$urlRouterProvider.otherwise('');
//创建路由
$stateProvider.state('default',{
//路径为空表示在当前页面
url:'',
template:'<h1>哈哈</h1>'
})
.state('home',{
url:'/home',
template:'<h1>home{{name}}</h1>',
//控制器
controller:['$scope',function($scope){
$scope.name='jeff'
}]
})
.state('movie',{
//接收参数
url:'/movie/{sex}/{age}',
templateUrl:'./angular/user.html',
controller:'movieCon'
})
}])
app.controller('main',['$scope',function($scope){
}])
app.controller('d1',['$scope','$state',function($scope,$state){
$scope.go=function(url)
{
$state.go(url);
}
}])
app.controller('movieCon',['$scope','$stateParams',function($scope,$stateParams){
$scope.age=17;
$scope.user=[
{id:1,name:'jeff'},
{id:2,name:'mike'}
]
//读取参数
console.log($stateParams.sex,$stateParams.age)
}])
</script>
</body>
</html>
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
