-
Notifications
You must be signed in to change notification settings - Fork 0
ui-sref指令 #10
Open
Description
实现的作用其实就是路由之间的切换以及参数的传递。
具体用法:
例如:
<a ui-sref="index">按钮</a>
在a标签中使用ui-sref,当JavaScript重新生成网页时,它会查找$state中名为"index"的state,读取这个state的url,然后在a标签里生成href=""url。
结果为:<a ui-sref="index" href="#/index.html">按钮</a>
注意:ui-sref不支持动态绑定,sref中你只能用state名,可以添加参数。如果需要动态的话,就只能放弃sref,用回href绑定,可以使用$state.href来读取state的url。(所谓的动态指的是通过循环数组生成标签以及标签内容)
PS:html结构加参数的时候是括号之后再一个花括号。
html层:
<body>
<a ui-sref="index({id:1,name:2})">index</a>
<a ui-sref="home({id:2})">home</a>
<!-- 路由在html在配置作用域,才可以进行切换、跳转 -->
<div ui-view=''></div>
</body>
js层:
<script src="js/angular.js"></script>
<script src="js/angular-ui-router.js"></script>
<script>
/*注入路由服务*/
var app = angular.module('myApp',['ui.router']);
/*进行路由配置*/
app.config(['$stateProvider',function($stateProvider){
$stateProvider.state('index',{
url:'/index.html?id&name',//参数必须在这里先定义
templateUrl:'templates/index.html',
controller:'indexCtrl',
params:{
'id':null,
'name':null
}
}).state('home',{
url:'home.html?id',
templateUrl:'templates/home.html',
controller:'homeCtrl',
params:{
'id':null
}
})
}])
/*控制器参数的传递*/
app.controller('indexCtrl',['$scope','$stateParams',function($scope,$stateParams){
console.log($stateParams.id)
}])
app.controller('homeCtrl',['$scope','$stateParams',function($scope,$stateParams){
console.log($stateParams.id)
}])
</script>
Metadata
Metadata
Assignees
Labels
No labels