版权声明:本文为博主原创文章,未经博主允许不得转载
传参方式
一般情况,主要用以下两种传参方式:
- $state.go(''stateName", {paramName: param})
- ui-sref="stateName({})"
下面来根据一个示例体验以下基本传参,
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<link href="css/index.css" rel="stylesheet" />
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="nestedViews/app2.js"></script>
</head>
<body ng-app="TrialApp" ng-controller="MainController">
<header>
<h1>Nav Bar</h1>
</header>
<nav>
<h3>Side Bar</h3><br />
<a ui-sref="1">Page 1</a><br />
<a ui-sref="2">Page 2</a><br />
<a ui-sref="params({ID:1})">Params</a><br />
</nav>
<div ui-view>
</div>
<footer>
Copyright Nobody
</footer>
</body>
</html>
上述代码中,演示了ui-sref传参,
<a ui-sref="状态名({参数名:变量(需要声明)})">Params</a><br />
'use strict';
// Define `TrialApp` module
var app = angular.module('TrialApp', ['ui.router']);
// Define routers
app.config(function($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'demo2.html',
controller: 'MainController'
})
.state('1', {
url: '/Page1',
templateUrl: 'nestedViews/htmls/1/Page1.html',
controller: function($scope, $state) {
$scope.change = function() {
$state.go('1.1');
}
}
})
.state('2', {
url: '/Page2',
templateUrl: 'nestedViews/htmls/2/Page2.html',
controller: function($scope, $state) {
$scope.transfer = function() {
var id = document.getElementById("id").value;
console.log(id);
$state.go('params',{ID: id});
}
}
})
.state('params', {
url: '/params/:ID',
templateUrl: 'nestedViews/htmls/param.html',
controller: function($scope, $state, $stateParams) {
$scope.index = $stateParams.ID;
$scope.data = [{
id : 1,
name : "victor",
imgSrc: "img/Victor.jpg",
age:24
},{
id : 2,
name : "angela",
imgSrc: "img/Angela.jpg",
age:23
},{
id : 3,
name : "Mark",
imgSrc: "img/Mark.png",
age:12
}];
$scope.exit = function() {
$state.go("2");
}
}
})
});
app.controller('MainController', function() {
//alert("Welcome to nested view demo!");
});
上述代码中,我们设置了一个“params”状态,
URL中,切记加上传参名字和前面的冒号:,例如“:ID”,如果传参成功,url地址栏会显示具体参数值;
Controller中,含$stateParams参数,方便接收参数,里面创建了一个data数组,里面有我们传参便于最后演示的信息数据。
在状态“2”中,我们创建了传参的函数“transfer()”,用来演示通过$state.go()的方式传参。
<div class="P2">
<h3>View 2</h3>
<input type="text" placeholder="Input ID" id="id"/>
<button ng-click="transfer()">Transfer Params</button>
</div>
上述代码中,我们设置了一个搜索按钮,只要在输入框中,输入id,点击按钮即可切换到相应的页面看到相应的信息param.html代码:
<h5>Person{{data[index - 1].id}}</h5>
<p>{{data[index - 1].name}} {{data[index - 1].age}}</p><br />
<img src="{{data[index - 1].imgSrc}}" /><br />
<button type="button" ng-click="exit()">Exit</button>
接着我们来看下效果: